React源码解读之生命周期的艺术

React生命周期主要通过三个阶段进行管理：MOUNTING、RECEIVE_PROPS和UNMOUNTING。详情如下：

1、使用createClass创建自定义组件

createClass 是创建自定义组件的入口方法，负责管理生命周期中的 getDefaultProps。因此，getDefaultProps 在整个生命周期中只执行1次，这样所有实例初始化的props将会被共享。

2、阶段一：MOUNTING

mountComponent 负责管理生命周期中的getInitialState、componentWillMount、render及componentDidMount。

注意点：

1. 在 componentWillMount 中调用setState方法不会触发re-render，而是会进行state合并，且合并在 componentWillMount 之后执行。因此 componentWillMount 中的 state 不是最新的， 在 render 中才可获取到更新后的 state。

2. mountComponent的本质是递归渲染，也就是说，父组件的 componentWillMount 会在子组件之前调用，而父组件的 componentDidMount 会在子组件之后调用。

3、阶段二：RECEIVE_PROPS

updateComponent 负责管理生命周期中的componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render及omponentDidUpdate。

注意点：

1. 在 componentWillReceiveProps 中调用setState方法不会触发re-render，而是会进行state合并，且在 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate中无法获取到更新后的state， 在 render 及componentDidUpdate中才可获取到更新后的 state。

2. updateComponent的本质也是递归渲染。

3. 禁止在shouldComponentUpdate、componentWillUpdate中调用setState，会造成循环调用，直至耗光浏览器内存后崩溃。

4、阶段三：UNMOUNTING

unmountComponent 负责管理生命周期中的componentWillUnmount。

在 componentWillUnmount 中调用setState方法不会触发re-render，因为所有更新队列和更新状态都被重置为null，并清除了公共类，完成了组件卸载操作。