React的更新流程

React的两大阶段

在React从开始创建到页面呈现的过程中，经历了两个阶段，分别是渲染和commit。

为了性能考虑，React的一次渲染更新过程中，并不是所有的元素都更新，所以需要渲染流程来找哪些元素要更新，并更新元素的状态。 执行的过程就是commit阶段，包括删除元素，更新元素节点等。

在commit阶段又细分出三个子阶段：beforeMutation、Mutation、Layout

React的更新流程

假设场景是setState触发了数据的变化

1.从当前节点往Root传递lane，标记更新信息

2.从根节点向下查找需要更新的节点

判断当前节点是待更新节点的依据是childLanes === updateLane

3.函数组件重新执行生成新的Element，与oldFiber进行Diff,生成新的Fiber树

diff比较出来哪里需要更新，会处理每一个待更新的fiber节点，给这个fiber节点打上flag标记

4.进入commit阶段，更新DOM

经过渲染阶段，待更新的fiber会存在不同的flag标志，在commit阶段会处理这些fiber，包括操作真实的DOM节点，执行生命周期等。