「源码学习」六、commit阶段

commitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参。

在rootFiber.firstEffect上保存了一条需要执行副作用的Fiber节点的单向链表effectList，这些Fiber节点的updateQueue中保存了变化的props。

这些副作用对应的DOM操作在commit阶段执行。

除此之外，一些生命周期钩子（比如**componentDidXXX **）、 **hook （比如useEffect ）需要在commit**阶段执行。

**commit阶段的主要工作（即Renderer**的工作流程）分为三部分：

• before mutation阶段（执行**DOM**操作前）

  该阶段之前要做一些变量赋值，状态重置，处理副作用。

  before mutation阶段的代码很短，整个过程就是遍历effectList并调用commitBeforeMutationEffects函数处理。

  commitBeforeMutationEffects 可以分为三个过程

  1. 处理DOM节点渲染/删除后的 autoFocus、blur逻辑
  2. 调用getSnapshotBeforeUpdate生命周期钩子
  3. 调度useEffect

• mutation阶段（执行**DOM**操作）

• layout阶段（执行**DOM**操作后）

  该阶段之后主要处理一些该阶段触发的生命周期钩子和hook，可以直接访问到已经改变后的DOM。

在before mutation阶段之前和layout阶段之后还有一些额外工作，涉及到比如useEffect的触发、优先级相关的重置、ref的绑定/解绑。