ReactJs 的各个版本生命周期、API变化 汇总（一、V16.0.0）

由于 React 的版本更新频繁，各类的新特性也是让人眼花缭乱的，为了方便自己查询最新的以及过往的 各个 React 版本 api、生命周期函数。 这里就用 caniuse 的方式做一个 方便查询的小功能。

那么要实现这个小功能之前，我们必须要对 React 的各种版本进行仔细的解读。 最快捷的方式就是 直接 通过官方文档来获取最真实的信息。 一、React 各个版本之间的纵向对比 React 版本   各个阶段 API Mounting（绑定） Updating（数据更新）
V 16.0.0   constructor()
componentWillMount()
render()
componentDidMount()   componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()  
V 16.3.2   constructor()
static&nbspgetDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()   componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() /UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()  
V 16.5.2   constructor()
static getDerivedStateFromProps()
render()
componentDidMount()   static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()  
V 16.7.0(最新)   constructor()
static getDerivedStateFromProps()
render()
componentDidMount()   static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()  
二、React 的基础 1、Components and Props

1-1、About Components

1、Components let you split the UI into independent, reusable pieces, and think about each piece in isolation 组件允许您将UI拆分为独立的、可重用的部分，并独立地考虑每个部分 2、Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. 从概念上讲，组件类似于JavaScript函数。它们接受任意输入(称为“props”)，并返回描述屏幕上应该出现的内容的React元素。

1-2、Component's presentation (展现形式)

The simplest way to define a component is to write a JavaScript function:
（最简单的方式）

function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

You can also use an ES6 class to define a component:
（你也可以使用 ES2015 中 类 的方式）

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

上面的二种写法，目前来看是等价的.

任何都 React 版本，关于 Lifecycle 我们都可以找到对应的几个状态，来进行不同的 api 的差异的对比。这样也是方便，我们进行记忆的。

三、React V 16.0.0

官方文档传送门： React V 16.0.0 官方文档

1、 The Component Lifecycle ( v16.0.0 ) 1-1 Mounting （绑定阶段）

constructor()

React.Component 的 constructor 会在组件被 mounted 之前被调用

当作为 React.Component 的子类的时候，必须要有 super(props) 被调用，否则会有 bug

constructor 是正确的初始化 state 的地方。并且在 constructor 中不能调用 setState() 方法

如果没有初始化的方法或者 state 的话，就不需要 constructor

state 也可以 基于 props 的值，但是 state 不会随着 props 带改变而改变。

例如:

constructor(props) { super(props); this.state = { color: props.initialColor }; }

如果你想监听 props 的变化，再这个版本中你可以使用 componentWillReceiveProps(nextProps) 方法。

componentWillMount()

componentWillMount()在挂载发生之前立即被调用

在 render() 之前 被调用

所以在 这个方法中使用 setState() 不会 触发 render 方法

避免在此方法中引入任何副作用

这是在服务器呈现时调用的惟一生命周期钩子

render()

render() 方法是必要的

render 方法当被调用时，会检查当前的 props 和 state 并返回 一种具体的类型

以下类型：
React elements、String and numbers 、 Portals 、null

当 render null、 false、ReactDOM.findDOMNode(this) 的时候会返回 null

render 函数中不应该修改 state 的值，它不会马上和浏览器交互。

如果想改变 state 的值，并马上能在浏览器上看到，那就在 componentDidMount() 中调用。

componentDidMount()

componentDidMount() 方法在 component is mounted 之后马上被调用

在这一步可以初始化需要的 Dom 节点

而且这里也是很好的进行 ajax 请求的地方。

这里也是进行 订阅 的地方。并记得在 componentWillUnmount() 方法中 退订。

在这里调用 setState() 会触发一个 额外的 rendering。如果同时触发2次也只会执行一次。

不要频繁使用 setState() 因为会带来 性能问题。

1-2 Updating （数据更新阶段）

componentWillReceiveProps()

componentWillReceiveProps(nextProps)

componentWillReceiveProps() 方法 在已经被 mounted 的组件在接受一个新的props 的时候被调用。

在这个方法中，你可以对比 this.props 和 nextProps 然后 使用 this.setState() 改变 props 的值