reactjs中的Lifecycle Methods - acelan86/ESinaProject GitHub Wiki

reactjs中，有下面这些控制component生命周期的函数，它们在component生成的不同的阶段被调用：

React.createClass({
    componentWillMount: function () {},
    componentDidMount: function () {},
    componentWillReceiveProps: function () {},
    shouldComponentUpdate: function () {},
    componentWillUpdate: function () {},
    componentDidUpdate: function () {},
    componentWillUnmount: function () {}
});

那么，他们分别在什么周期被调用，请记住下面几点：

• 这些函数被分为3大类 [Mount, Update, Unmount], 也就是挂载，更新，卸载，可以从函数名的后缀区分出来，他们分别作用与component挂载阶段，更新阶段和卸载阶段。
• Mount和Update分别有Will和Did阶段，也就是将要开始，已经结束两个阶段。
• Mount类的方法只在首次调用时执行，且只执行一次
• Update类方法再后续数据变化，component刷新展现的时候执行，首次不执行
• Unmount类方法在卸载时执行，只执行一次（因为卸载了就over了嘛）

特殊记住的Update阶段的几个方法：

• componentWillReceiveProps(newProps)

该方法在component接收到新属性，且还没有将新属性设置到this.props的时候调用，自带参数newProps指向变更的新属性，旧属性依然可以通过this.props访问，当在这个方法中调用this.setState的时候可以避免component的额外渲染。 没有提供与componentWillReceiveProps相对应的方法（componentWillReceiveState）。因为属性变化会引起状态变化，反过来却不存在。如果你想响应状态变化，可以使用下面的componentWillIUpdate方法。 一般当component的state需要根据props进行变换的时候。在接收到newProps的时候先根据一定的关联关系处理得到state，再调用this.setState(state)

• componentWillUpdate(newProps, newState)

该方法在component即将执行更新渲染时执行，看起来跟上面的方法接收到新属性时调用的时间很接近，但需要进行区别。该方法用于响应状态变化，当要根据new props来对state执行更新操作时，使用willReceiveProps方法，而且，在该方法中需要避免调用this.setState方法，否则会引起控件渲染死循环。

• shouldComponentUpdate(newProps, newState)

该方法同上面两个方法，初始化时候不执行，且它在forceUpdate的时候也不会执行。它可以由该函数提供一个bool型的返回值，来决定最终是否进行component的渲染（所以它在forceUpdate的时候不应该执行），并且，当它返回flase的时候，componentWillUpdate和componentDidUpdate也不会执行（可以看出，shouldComponentUpdate在这两个方法之前执行），它同样具有newProps和newState两个参数。

从上面的分析看出，生命周期函数的执行顺序为：

Mount: componentWillMount --> componentWillMount

Update: componentWillReceiveProps --> shouldComponentUpdate --> componentWillUpdate --> componentDidUpdate

Unmount: componentWillUnmount

以上，欢迎评论指正