React生命周期

在理解react生命周期之前，需要先了解两个概念：

1. Reconciler（协调器）：计算出状态变化，找出变化的组件，为变化的虚拟DOM打标记，当所有组件都完成了Reconciler，才会统一较给Renderer.
2. Renderer（渲染器）：将状态变化渲染在视图中。

Reconciler依赖的是reconcile算法（diff算法），Renderer一般使用ReactDOM渲染器（另一种为ReactNative）

当用户触发this.setState之后，react首先通过reconcile算法计算出状态变化，然后通过ReactDOM将状态变化渲染在视图中。

由下图可以看到，在首次渲染时一个组件首先会调用constructor，然后调用getDerivedStateFromProps,然后调用render，当整个render阶段完成以后进入commit阶段，完成了对应的DOM渲染以后，调用componentDidMount。

在react中组件是以组件树的形式存在，一下面的例子为例，来讲解生命周期函数的调用过程。

1. 调用ReactDOM.render
2. 进入render阶段
3. 采用深度优先遍历创建fiber树（虚拟DOM树）。每次创建一个节点，都会分别调用生命周期函数constructor、getDerivedStateFromProps、render，然后再查找是否有子节点，如果有子节点，就继续创建子节点。
4. 进入commit阶段。首先会将fiber树渲染到对应的视图中，当渲染完成以后，从子节点开始执行对应的生命周期，也就是从C开始执行componentDidMount生命周期函数。

当用户调用this.setState改变了state，会出发更新，再次进入render阶段

1. 调用this.setState
2. 进入Render阶段
3. 采用深度优先遍历创建fiber树。对于没有更新的函数，不需要调用对应的生命周期函数。
4. reconcile算法标记变化，C2调用生命周期函数getDerivedStateFromProps、render。
5. 进入commit阶段
6. 执行4中变化所对应的视图操作，执行对应的生命周期函数getSnapShotBeforeUpdate、componentDidUpdate。
7. 当执行完成后，新创建的fiber树替换掉原来的fiber树

参考：

魔术师卡颂的个人空间_哔哩哔哩_Bilibili