React 生命周期

译自 React Component Lifecycle

每个组件都有若干生命周期函数。如函数名称所示，带有will前缀的函数会在某些动作发生前被调用，而带有did前缀的函数则在发生后被调用。

可以简单的为组件的生命周期划分为以下三个阶段：

1. 初始化阶段（Mounting）
   即组件实例被创建及被插入到Dom的阶段。
   以下函数会被调用：

constructor()
componentWillMount()
render()
componentDidMount()

2. 挂载中阶段（Updating）
   此间主要对组件进行更新。更新可能是由props或者state的变化引起的。
   更新时以下函数会被调用：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

3. 销毁阶段（Unmounting）
   即组件要被删除的阶段。以下函数会被调用：

componentWillUnmount()

生命周期函数使用注意事项与时机

1. render()
   调用时检查this.props和this.state，并返回React element（标准dom元素，如<div />，或自定义复合组件，如<MyComponent />）。当然，也可以返回null或false来告诉React你并不想render任何东西。
   render()函数需要是 pure 的，即它不修改组件的state并且不会直接与浏览器交互。如果你要和浏览器交互，推荐在componentDidMount()或其他生命周期函数中操作。

shouldComponentUpdate()函数返回false时render()不会被调用

2. constructor(props)
   组件挂载前调用。因为每一个组件类都是React.Component的派，重写该函数一定记得在第一行就调用super(props)，否则会因为没有定义 this.props引起bug。
   初始化state、绑定方法（如reflux的state mapping）等适合放在该函数中。如果需要这两种操作就不用重写该方法了。
   基于props的初始化state同样可以放在该方法中，注意是初始化state，后续的props变化不会再引起state变化，如果要将props的变化映射到state，需要在componentWillReceiveProps(nextProps)中调用setState()方法。

3. componentWillMount()
   组件被挂载前、render函数被调用前调用，因此，在其中同步地改变state不会引起re-render。
   这是server rendering模式中唯一一个被调用的生命周期函数，不过通常建议优先使用constructor。

4. componentDidMount()
   组件挂载后调用，网络请求（获取数据）可以放在该函数中，setState 会引起re-render

5. componentWillReceiveProps(nextProps)
   在接收到新的props前被调用。如果需要将props的改变映射到state上，建议将映射放在这个函数中。
   需要注意的是，即使props没有发生变化，该函数也可能被调用，所以使用setState将props映射到state时，最好比对下this.props和nextProps，否则可能会造成额外的re-render。
   在mounting阶段，该函数不会被调用。

6. shouldComponentUpdate(nextProps, nextState)
   用于props、state的改变是否要响应到到组件上，在接收到新的props、state后componentWillUpdate()前调用。
   返回true，引起re-render，反之则不。
   返回false，不影响子组件因其内部state变化引起的re-render。
   目前返回false时componentWillUpdate()和componentDidUpdate()将不会被调用。未来React可能会对此作出改变：返回false依然会引起re-render，”treat shouldComponentUpdate() as a hint rather than a strict directive“。
   默认也是大多数情况下，state的改变都要响应到组件上（即返回true，re-render ）。
   如果确定组件re-render频繁造成了页面卡顿，React提供了React.PureComponent类。它包含一个自带简单比较props、state变化的该方法，可以继承该类进行优化。当然，也可以自己比较变化指定更新。

7. componentWillUpdate(nextProps, nextState)
   在接收到新的props、state后，render函数前被调用。初始化阶段不会调用。不能在函数中使用setState方法。
   可在此函数中完成更新操作的准备工作，如一些更新前的subscription通知。

8. componentDidUpdate(prevProps, prevState)
   更新后立即调用，同样初始化阶段不会被调用。
   可用在此对比前后props和state变化，决定是否要发某些网络请求。

9. componentWillUnmount()
   组件被卸载销毁前调用。
   在该函数中可以做一些清理操作，如unsubscribe、取消网络请求等。

10. setState(updater, [callback])
    用于更新组件state，异步形式，可以理解为一种请求。
    updater参数是一个包含了prevState和props的函数，该函数需要返回新的state，你不能在其中直接修改state，如:

// correct
(prevState, props) => {
    return { counter: prevState.counter + props.step }
};
// error
(prevState, props) => {
    this.state.counter = preState.counter + props.step;
    // something else
};

11. forceUpdate()
    调用forceUpdate会跳过shouldComponentUpdate ()，通常尽量避免使用该函数。

其他你需要了解的 React 知识

• React Diff 算法
• React Server Render