点击进入React源码调试仓库。

本篇是详细解读React DOM操作的第二篇文章，文章所讲的内容发生在commit阶段。

插入DOM节点操作的是fiber节点上的stateNode，对于原生DOM类型的fiber节点来说stateNode存储着DOM节点。commit阶段插入节点的操作就是循着fiber树把DOM节点插入到真实的DOM树中。

commitPlacement是插入节点的入口，

function commitMutationEffectsImpl(  fiber: Fiber,  root: FiberRoot,  renderPriorityLevel,) {  ...  switch (primaryEffectTag) {    case Placement: {      // 插入操作      commitPlacement(fiber);      fiber.effectTag &= ~Placement;      break;    }    ...  }}

我们将需要被执行插入操作的fiber节点称为目标节点,commitPlacement函数的功能如下：

找到目标节点DOM层面的父节点（parent）根据目标节点类型，找到对应的parent如果目标节点对应的DOM节点目前只有文字内容，类似<div>hello</div>，并且持有ContentReset（内容重置）的effectTag，那麽插入节点之前先设置壹下文字内容找到基準节点执行插入

function commitPlacement(finishedWork: Fiber): void {  ...  // 找到目标节点DOM层面的父节点（parent）  const parentFiber = getHostParentFiber(finishedWork);  // 根据目标节点类型，改变parent  let parent;  let isContainer;  const parentStateNode = parentFiber.stateNode;  switch (parentFiber.tag) {    case HostComponent:      parent = parentStateNode;      isContainer = false;      break;    case HostRoot:      parent = parentStateNode.containerInfo;      isContainer = true;      break;    case HostPortal:      parent = parentStateNode.containerInfo;      isContainer = true;      break;    case FundamentalComponent:      if (enableFundamentalAPI) {        parent = parentStateNode.instance;        isContainer = false;      }  }  if (parentFiber.effectTag & ContentReset) {    // 插入之前重设文字内容    resetTextContent(parent);    // 删除ContentReset的effectTag    parentFiber.effectTag &= ~ContentReset;  }  // 找到基準节点  const before = getHostSibling(finishedWork);  // 执行插入操作  if (isContainer) {    // 在外部DOM节点上插入    insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);  } else {    // 直接在父节点插入    insertOrAppendPlacementNode(finishedWork, before, parent);  }}

这裏要明确的壹点是DOM节点插入到哪，也就是要根据目标节点类型，找到对应的parent。

如果是HostRoot或者HostPortal类型的节点，第壹它们都没有对应的DOM节点，第二实际渲染时它们会将DOM子节点渲染到对应的外部节点上（containerInfo）。所以当fiber节点类型为这两个时，就将节点插入到这个外部节点上，即：

// 将parent赋值为fiber上的containerInfoparent = parentStateNode.containerInfo...// 插入到外部节点（containerInfo）中insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent)

如果是HostComponent，则直接向它的父级DOM节点中插入，即

// 直接在父节点插入insertOrAppendPlacementNode(finishedWork, before, parent);

我们看到，在实际执行插入的时候，都有壹个before参与，那它是干什麽的呢？

定位基準节点

React插入节点的时候，分两种情况，新插入的DOM节点在它插入的位置是否已经有兄弟节点，没有，执行parentInstance.appendChild(child)，有，调用parentInstance.insertBefore(child, beforeChild)。这个beforeChild就是上文提到的before，它是新插入的DOM节点的基準节点，有了它才可以在父级DOM节点已经存在子节点的情况下，将新节点插入到正确的位置。试想如果已经有子节点还用parentInstance.appendChild(child)去插入，那是不是就把新节点插入到最末尾了？这显然是不对的。所以找到before的位置十分重要，before（基準节点）通过getHostSibling函数来定位到。

我们用壹个例子来说明壹下getHostSibling的原理：

p为新生成的DOM节点。a为已存在且无变化的DOM节点。它们在fiber树中的位置如下，p需要插入到DOM树中，我们可以根据这棵fiber树来推断出最终的DOM树形态。

                    Fiber树                    DOM树                   div#root                  div#root                      |                         |                    <App/>                     div                      |                       /   \                     div                     p     a                    /   ↖                   /      ↖ Placement  -->   p ----> <Child/>                             |                             a

可以看到，在Fiber树中，a是p的父节点的兄弟节点，而在DOM树中，p和a是兄弟节点的关系，p最后要插入到a之前。

按照以上的图示我们来推导壹下过程：

p有兄弟节点<Child/>，它有子节点a，a是壹个原生DOM节点，并且a已存在于DOM树，那麽a作为结果返回，p插入到a之前。

再来壹个例子，p同样也是新插入的节点，h1作为已有节点存在于DOM树中。

                      Fiber树           DOM树                     div#root         div#root                        |                |                      <App/>            div                        |               /  \                       div             p   h1                      /   ↖                     /      ↖               <Child1/>--><Child2/>                  |            |                  |            | Placement  --->  p            h1

p没有兄弟节点，往上找到<Child1/>，它有兄弟节点<Child2/>，<Child2/>不是原生DOM节点，找<Child2/>的子节点，发现了h1，h1是原生DOM节点并且h1已存在于DOM树，那麽h1作为结果返回，p插入到h1之前。

经过两个例子，getHostSibling寻找到新插入节点的兄弟DOM节点的过程可以总结为：

优先查找同级兄弟节点，过滤出原生DOM组件。过滤不出来就查找同级节点的子节点，过滤出原生DOM组件。重复查找兄弟节点再查找子节点的过程，直到再也找不到兄弟节点。向上查找到父节点，兄对父节点也重复前三步。直到过滤出原生DOM节点，如果该DOM节点不是需要插入的节点，那麽它作为结果返回，也就是定位到了before（基準节点），新节点需要插入到它的前面。

这其中有如下规律：

需要插入的节点如果有同级fiber节点且是原生DOM节点，那麽它壹定是插入到这个节点之前的。如果同级节点不是原生DOM节点，那麽它和同级节点的子节点在DOM层面是兄弟节点的关系。

需要插入的节点如果没有同级节点，那麽它和父节点的兄弟节点的子节点在DOM层面是兄弟节点的关系。

基準节点和目标节点在DOM树中是兄弟关系，且它的位置壹定在目标节点之后

接下来按照上面总结的过程看壹下它源码：

function getHostSibling(fiber: Fiber): ?Instance {  let node: Fiber = fiber;  siblings: while (true) {    while (node.sibling === null) {      if (node.return === null || isHostParent(node.return)) {        // 代码执行到这裏说明没有兄弟节点，并且新节点的父节点为DOM节点，        // 那麽它将作为唯壹的节点，插入父节点        return null;      }      // 如果父节点不为null且不是原生DOM节点，那麽继续往上找      node = node.return;    }    // 首先从兄弟节点裏找基準节点    node.sibling.return = node.return;    node = node.sibling;    // 如果node不是以下三种类型的节点，说明肯定不是基準节点，    // 因为基準节点的要求是DOM节点    // 会壹直循环到node为dom类型的fiber为止。    // 壹旦进入循环，此时的node必然不是最开始是传进来的fiber    while (      node.tag !== HostComponent &&      node.tag !== HostText &&      node.tag !== DehydratedFragment    ) {      if (node.effectTag & Placement) {        // 如果这个节点也要被插入，继续siblings循环，找它的基準节点        continue siblings;      }      if (node.child === null || node.tag === HostPortal) {        // node无子节点，或者遇到了HostPortal节点，继续siblings循环，        // 找它的基準节点。        // 注意，此时会再进入siblings循环，循环的开始，也就是上边的代码        // 会判断这个节点有没有siblings，没有就向上找，有就从siblings裏找。        continue siblings;      } else {        // 过滤不出来原生DOM节点，但它有子节点，就继续往下找。        node.child.return = node;        node = node.child;      }    }    if (!(node.effectTag & Placement)) {      // 过滤出原生DOM节点了，并且这个节点不需要动，      // stateNode就作为基準节点返回      return node.stateNode;    }  }}

此时基準节点已经找到，接下来执行插入操作。

插入节点

插入节点操作的是DOM树，除了插入目标节点，还需要遍历它的fiber子树，保证所有子DOM节点都被插入，遍历的过程是深度优先。

我们以将节点插入父节点的insertOrAppendPlacementNode函数为主，来梳理壹下插入的过程。

                    Fiber树                   div#root                      |                    <App/>                      |                    div#App                      |Placement  -->     <Child/>                    /                   /                  p ------> span ----- h1                             |                             a

现在要将<Child/>插入到div#App中，真实的插入过程是先找到div#App作为parent，此后再找<Child/>是否有sibling节点，然后调用insertOrAppendPlacementNode来执行插入操作。
来看壹下它的调用方式：

insertOrAppendPlacementNode(finishedWork, before, parent);

壹共有三个参数：

finishedWork：就是需要插入的fiber节点，当前是<Child/>before： <Child/>的sibling节点，该场景下为nullparent： <Child/>的parent节点，也就是div#App

进入函数，它的任务是将DOM节点插入到parent之下或before之前，如果finishedWork是原生DOM节点，那麽依据有无before来决定节点的插入方式，无论哪种方式都会将DOM实实在在地插入到正确的位置上。

如果不是原生DOM节点，就是<Child/>这种，不能对它进行插入操作，那麽怎麽办呢？向下，从它的child切入，再次调用insertOrAppendPlacementNode，也就是递归地调用自己，将child壹个不剩地全插入到parent中。在例子中，会把p插入到parent。

此时<Child/>的子节点已经全部完成插入，这时会再找到p的兄弟节点span，对它进行插入，然后发现span还有兄弟节点h1，将h1也插入。

这就是节点插入的完整过程。有壹个特点与completeWork中的插入节点类似，也就是只将目标节点的第壹层子DOM节点插入到正确的位置，因为子DOM节点的再下层的DOM节点已经在处理该层的时候插入过了。

来对照着上面的过程看壹下insertOrAppendPlacementNode的源码

function insertOrAppendPlacementNode(  node: Fiber,  before: ?Instance,  parent: Instance,): void {  const {tag} = node;  const isHost = tag === HostComponent || tag === HostText;  if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {    // 如果是原生DOM节点，直接进行插入操作    const stateNode = isHost ? node.stateNode : node.stateNode.instance;    if (before) {      // 插入到基準节点之前      insertBefore(parent, stateNode, before);    } else {      // 插入到父节点之下      appendChild(parent, stateNode);    }  } else if (tag === HostPortal) {    // HostPortal节点什麽都不做  } else {    // 不是原生DOM节点，找它的子节点    const child = node.child;    if (child !== null) {      // 对子节点进行插入操作      insertOrAppendPlacementNode(child, before, parent);      // 然后找兄弟节点      let sibling = child.sibling;      while (sibling !== null) {        // 插入兄弟节点        insertOrAppendPlacementNode(sibling, before, parent);        // 继续检查兄弟节点        sibling = sibling.sibling;      }    }  }}

在递归调用insertOrAppendPlacementNode插入节点的时候也传入了before，这个before是最开始那个待插入的目标节点的基準节点。我们来用源码中的两个场景看壹下这样做的意义。

假设目标节点不是原生DOM节点，且有已存在DOM的兄弟节点（就是基準节点before，span）：

有子节点，对子节点插入到div，最终的DOM形态是右边的DOM树，p虽然在fiber树裏和span不是同级的关系，但在DOM层面是，所以要插入到span的前面，这是before在这种场景下存在的意义

                    Fiber树                  DOM树                     div                     div                      |                      / \Placement  -->     <Child/>----> span       /   \                      |                    p    span                      |                      p

子节点完成插入，最终形成的DOM树裏，p、a、span三者是兄弟关系，p和a要依次插入到span之前，所以这种场景也需要before。

                    Fiber树                  DOM树                     div                     div                      |                      /|\Placement  -->     <Child/>----> span       / | \                      |                    p  a  span                      |                      p ----> a

总结

结合实际插入节点产生的问题不难总结出commit阶段插入节点过程的特点：

定位DOM节点插入的正确位置避免DOM节点的多余插入

找到基準节点before是第1点的关键，有了基準节点就能知道即将插入的父级节点上是否有已经存在，并且位置在目标节点之后的子节点。根据有无基準节点来决定执行哪种插入策略。

如何避免DOM节点的多余插入呢？上面分析插入过程的时候已经讲过，只会将目标节点的第壹层子DOM节点插入到正确的位置，因为子DOM节点的插入工作已经完成了。这和effectList中收集的fiber节点的顺序有关，因为是自下而上收集的，所以fiber的顺序也是自下而上，导致DOM节点的插入也是自下而上的，可以类比壹下累加的过程。

如下，可以看到最终的effectList中，最下层的节点排在最前面：

以上，是依据Fiber树插入DOM节点的过程。