声明周期我们将它分成了三部分:
1. 初始化与挂载
执行构造函数->componentWillMount->render->componentDidMount
这个过程在组件的生命周期中只执行一次。等componentDidMount执行完毕之后,组件就进入了运行状态。
2. 运行阶段
当props发生改变后,会先回调componentWillReceiveProps并传入新的props。然后会执行更新界面相关的一系列回调方法。
当state发生改变后,会执行更新相关的回调方法。
更新相关的回掉方法:
1、shouldComponentUpdate 该函数会返回一个bool值用来决定是否需要更新界面。
2、componentWillUpdate 更新前会回调这个函数。
3、render再次执行这个函数,这个函数返回子组件信息。
4、componentDidUpdate 等待更新完成之后回调
3. 卸载阶段
当组件将要被卸载时,回先回调componentWillUnmount函数。
生命周期对应方法名 作用 调用次数
方法名 |
作用 |
调用次数 |
constructor |
构造函数,初始化需要的state |
1次 |
componentWillMount |
控件渲染前触发 |
1次 |
rander |
渲染控件的方法 |
多次 |
componentDidMount |
控件渲染后触发 |
1次 |
componentWillReceiveProps |
组件接收到新的props时被调用 |
多次 |
shouldComponentUpdate |
当组件接收到新的props和state时被调用 |
多次 |
componentWillUpdate |
props或者state改变,并且此前的shouldComponentUpdate方法返回为 true会调用该方法 |
多次 |
componentDidUpdate |
组件重新渲染完成后会调用此方法 |
多次 |
componentWillUnmount |
组件卸载和销毁之前被调用 |
1次 |
生命周期示例图