react中commit工作流程

整个React工作流程可以分为两大阶段：

• Render阶段
  Schecule
  Reconcile

• Commit阶段
  注意，Render阶段是在内存中运行的，这意味者可以被打断，而commit阶段一旦开始同步执行直到完成。

Renderer工作的阶段被称为commit阶段。commit阶段可以分为三个子阶段：

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

mutation阶段（执行DOM操作）

layout阶段（执行DOM操作后）

其中上面的每个阶段又分为三个子阶段：
commit×××Effects
commit×××Effects_begin
commit×××Effects_complete

commit×××Effects：
该函数是每个子阶段的入口函数，finishedWor会作为firstChild参数传进去，相关代码如下：

function commit×××Effects(root,firstChild){
nextEffects = firstChild;
// 省略标记全局变量
commit×××Effects_begin();
// 省略重置全局变量
}

因此在该函数中，主要的工作是将firstChild赋值给全局变量nextEffects ，然后执行commit×××Effects_begin。

commit×××Effects_begin：

向下遍历FiberNode，遍历的时候直到满足如下条件之一的FiberNode：

• 当前的FiberNode的子FiberNode不包含该子阶段对应的flags；
• 当前的FiberNode不存在子FiberNode

接下来会对目标FiberNode执行commit×××Effects_complete方法。

commit×××Effects_complete：

该方法针对flags做具体的操作，主要包含以下三个步骤：

• 对当前FiberNode执行flags对应的操作，也就是执行commit×××EffectsOnFiber
• 对当前FiberNode存在兄弟节点，则对兄弟节点执行commit×××Effects_begin
• 如不存在兄弟FiberNode，则对父节点执行commit×××Effects_complete

总结一下，每个阶段都会以DFS原进行遍历，最终会在commit×××EffectsOnFiber针对不同的flags做出不同的处理。

before mutation阶段:

before mutation阶段的主要工作发生在commitBeforeMutationEffects_complete中的commitBeforeMutationEffectsOnFiber方法，这个方法主要是处理如两种类型的FiberNode

• ClassComponent:执行getSnapshotBeforeUpdate
• HostRoot: 清空HostRoot挂载的内容，方便mutation阶段进行渲染；

mutation阶段:

对于HostComponent，mutation阶段的主要工作是对Dom元素的增删改查

删除Dom元素

删除dom的操作发生在commitMutationsEffects_begin方法中，首先会拿到deletions数组,然后遍历该数组进行删除操作，对应删除dom的方法为commitDeletion

  commitDeletion(root, nextEffect, renderPriorityLevel);

commitDeletion内部的完整逻辑还是比较复杂的，因为删除一个dom元素时，不是删除就删除的，还需要考虑以下几点：

• 其子树中所有组件的unmount逻辑
• 子树中所有ref属性的卸载操作
• 其子树中所有Effect相关的Hook的destory回调的执行

<div>
<SomeClassComponent/>
<div ref={divRef}>
<SomeFunctionsComponents />
</div>
</div>

当删除最外层的div这个Dom元素时，需要考虑：

• 执行SomeClassComponent类组件对应的componentWillUnmount方法，
• 执行SomeFunctionsComponents 函数组件对应的useEffect，useLayoutEffect这些hook中对应的distory方法
• divRef的卸载操作

整个删除都是DFS顺序，遍历每个子树的FiberNode,执行对应的操作

插入、移动Dom元素

上面的删除是在commitMutationsEffects_begin方法中执行的，而插入和移动dom元素是在commitMutationsEffects_complete中的commitMutationsEffectsOnFiber方法里面执行的

Placement flag对应的操作方法为CommitPlacement,整个CommitPlacement可以分为三个步骤：

• 从当前FiberNode向上遍历，获取第一个类型为HostComponent，HostRoot，HostPortal三者之一的祖先FiberNode,其对应的Dom元素是执行Dom操作的目标元素的父级DOM元素；
• 获取用于执行parentNode.insertBefore(child,before)方法before对应的DOM元素；
• 执行parentNode.insertBefore方法(存在before)或者parentNode.appendChild方法（不存在before）

对于还没有插入的DOM元素(对应的就是mount场景)，inserBefore会将目标Dom元素插入到before之前，appendChild会将目标DOM元素最为父DOM元素作为父DOM元素的最后一个子元素插入；

对于ui中已经存在的DOM元素(对应的就是mount场景)，inserBefore会将目标Dom元素移动到before之前，appendChild会将目标DOM元素移动到同级最后

更新Dom元素

更新dom元素，最主要的工作是更新对应的属性，执行的方法是commitWork；

其中变化的属性会以key,value相邻的形式存在FiberNode.updateQueue，最终在fiberNode.updateQueue里面所保存的要变化的属性就会在一个名为updateDOMProperties方法被遍历然后进行处理，这里的处理主要是处理如下的四种数据：

• style属性
• innerHTML
• 直接文本节点变化
• 其他元素属性
  当mutations阶段中的主要工作完成后，在进入layout阶段之前，会完成Fiber Tree的切换

root.current =  finishedWork

layout 阶段

有关dom元素的操作在mutations中已经结束了。

该阶段主要工作几种在commitLayoutEffectOnFiber方法中，在该方法内部，会针对不同的FiberNode执行不同的操作

• 对于ClassComponent，该阶段执行componentDidMount/update方法，
• 对于FunctionComponent,该阶段执行useLayoutEffect的回调函数。