React生命周期主要通过三个阶段进行管理:MOUNTING、RECEIVE_PROPS和UNMOUNTING。详情如下:
1、使用createClass创建自定义组件
createClass 是创建自定义组件的入口方法,负责管理生命周期中的 getDefaultProps。因此,getDefaultProps 在整个生命周期中只执行1次,这样所有实例初始化的props将会被共享。
2、阶段一:MOUNTING
mountComponent 负责管理生命周期中的getInitialState、componentWillMount、render及componentDidMount。
注意点:
在 componentWillMount 中调用setState方法不会触发re-render,而是会进行state合并,且合并在 componentWillMount 之后执行。因此 componentWillMount 中的 state 不是最新的, 在 render 中才可获取到更新后的 state。
mountComponent的本质是递归渲染,也就是说,父组件的 componentWillMount 会在子组件之前调用,而父组件的 componentDidMount 会在子组件之后调用。
3、阶段二:RECEIVE_PROPS
updateComponent 负责管理生命周期中的componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render及omponentDidUpdate。
注意点:
在 componentWillReceiveProps 中调用setState方法不会触发re-render,而是会进行state合并,且在 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate中无法获取到更新后的state, 在 render 及componentDidUpdate中才可获取到更新后的 state。
updateComponent的本质也是递归渲染。
禁止在shouldComponentUpdate、componentWillUpdate中调用setState,会造成循环调用,直至耗光浏览器内存后崩溃。
4、阶段三:UNMOUNTING
unmountComponent 负责管理生命周期中的componentWillUnmount。
在 componentWillUnmount 中调用setState方法不会触发re-render,因为所有更新队列和更新状态都被重置为null,并清除了公共类,完成了组件卸载操作。