声明周期我们将它分成了三部分:
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次 |
生命周期示例图
image.png