在理解react生命周期之前,需要先了解两个概念:
- Reconciler(协调器):计算出状态变化,找出变化的组件,为变化的虚拟DOM打标记,当所有组件都完成了Reconciler,才会统一较给Renderer.
- Renderer(渲染器):将状态变化渲染在视图中。
Reconciler依赖的是reconcile算法(diff算法),Renderer一般使用ReactDOM渲染器(另一种为ReactNative)
当用户触发this.setState之后,react首先通过reconcile算法计算出状态变化,然后通过ReactDOM将状态变化渲染在视图中。
由下图可以看到,在首次渲染时一个组件首先会调用constructor,然后调用getDerivedStateFromProps,然后调用render,当整个render阶段完成以后进入commit阶段,完成了对应的DOM渲染以后,调用componentDidMount。
在react中组件是以组件树的形式存在,一下面的例子为例,来讲解生命周期函数的调用过程。
- 调用ReactDOM.render
- 进入render阶段
- 采用深度优先遍历创建fiber树(虚拟DOM树)。每次创建一个节点,都会分别调用生命周期函数constructor、getDerivedStateFromProps、render,然后再查找是否有子节点,如果有子节点,就继续创建子节点。
- 进入commit阶段。首先会将fiber树渲染到对应的视图中,当渲染完成以后,从子节点开始执行对应的生命周期,也就是从C开始执行componentDidMount生命周期函数。
当用户调用this.setState改变了state,会出发更新,再次进入render阶段
- 调用this.setState
- 进入Render阶段
- 采用深度优先遍历创建fiber树。对于没有更新的函数,不需要调用对应的生命周期函数。
- reconcile算法标记变化,C2调用生命周期函数getDerivedStateFromProps、render。
- 进入commit阶段
- 执行4中变化所对应的视图操作,执行对应的生命周期函数getSnapShotBeforeUpdate、componentDidUpdate。
- 当执行完成后,新创建的fiber树替换掉原来的fiber树
参考: