React组件的生命周期

本文基于React17版本开始的新的生命周期。

React组件的生命周期分为三个阶段：Mounting -> Updating -> Unmounting

Mounting

1. 调用组件的构造函数constructor()。
2. 调用getDerivedStateFromProps()，在Mounting和Updating阶段都会被调用。
3. 调用render()函数，组件初始化一定会调用的只有render函数。
4. 组件挂载完毕。
5. 触发componentDidMount()钩子函数。

Updating

组件的 props 或者 state 发生变化，组件就会更新。

1. 调用getDerivedStateFromProps()，根据shouldComponentUpdate()的返回值，判断组件的输出是否受当前state或props更改的影响。
2. 调用shouldComponentUpdate()。
3. 调用render()函数，唯一必须会被调用的函数。
4. 调用getSnapshotBeforeUpdate()，在最近一次渲染输出之前调用。
5. 组件更新完毕。
6. 调用componentDidUpdate()，在组件更新后会被立即调用。

Unmounting

1. 调用componentWillUnmount()钩子函数，在组件卸载及销毁之前直接调用。
2. 组件被卸载或者销毁。

可以看出react组件生命周期与vue的组件生命周期有区别但是不大。