react中commit工作流程-Toy模板网

这篇具有很好参考价值的文章主要介绍了react中commit工作流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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执行commit×××Effects_complete方法。

commit×××Effects_complete：

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

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

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

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

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

  commitDeletion(root, nextEffect, renderPriorityLevel);

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

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

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

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

上面的删除是在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元素移动到同级最后