React16源码: React中commitAllHostEffects内部的commitPlacement的源码实现

本文主要是介绍React16源码: React中commitAllHostEffects内部的commitPlacement的源码实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

commitPlacement

1 ）概述

在 react commit 阶段的 commitRoot 第二个while循环中
调用了 commitAllHostEffects，在这个函数内部处理了
把一个新的dom节点挂载到真正的dom树上面去的一个过程
现在主要关注下其中调用的 commitPlacement

2 ）源码

定位到 packages/react-reconciler/src/ReactFiberCommitWork.js#L850

function commitPlacement(finishedWork: Fiber): void {if (!supportsMutation) {return;}// Recursively insert all host nodes into the parent.// 找到第一个父节点上的 HostComponent 或 HostRoot 或 HostPortalconst parentFiber = getHostParentFiber(finishedWork);// Note: these two variables *must* always be updated together.let parent;let isContainer;// 判断 tag 匹配处理程序switch (parentFiber.tag) {case HostComponent:parent = parentFiber.stateNode;isContainer = false;break;case HostRoot:parent = parentFiber.stateNode.containerInfo;isContainer = true;break;case HostPortal:parent = parentFiber.stateNode.containerInfo;isContainer = true;break;default:invariant(false,'Invalid host parent fiber. This error is likely caused by a bug ' +'in React. Please file an issue.',);}if (parentFiber.effectTag & ContentReset) {// Reset the text content of the parent before doing any insertionsresetTextContent(parent);// Clear ContentReset from the effect tagparentFiber.effectTag &= ~ContentReset;}// before可能不存在，比如如果是单一节点const before = getHostSibling(finishedWork);// We only have the top Fiber that was inserted but we need recurse down its// children to find all the terminal nodes.let node: Fiber = finishedWork;while (true) {// 只有这种情况下，才有插入dom的需要，根据 before 和 isContainer来执行不同的插入if (node.tag === HostComponent || node.tag === HostText) {if (before) {// 这里匹配 HostRoot 或 HostPortalif (isContainer) {insertInContainerBefore(parent, node.stateNode, before);} else {// 这里匹配 HostComponentinsertBefore(parent, node.stateNode, before);}} else {// 不存在 before// 匹配 HostRoot 或 HostPortalif (isContainer) {appendChildToContainer(parent, node.stateNode);} else {// 匹配 HostComponentappendChild(parent, node.stateNode);}}} else if (node.tag === HostPortal) {// If the insertion itself is a portal, then we don't want to traverse// down its children. Instead, we'll get insertions from each child in// the portal directly.} else if (node.child !== null) {// 如果都不符合，并且存在子节点，往下去找node.child.return = node;node = node.child;continue; // 拿到 child 后，跳过此次，继续while循环}// 到终点了，就结束if (node === finishedWork) {return;}while (node.sibling === null) {if (node.return === null || node.return === finishedWork) {return;}node = node.return;}node.sibling.return = node.return;node = node.sibling;}
}

进入 getHostParentFiber

function getHostParentFiber(fiber: Fiber): Fiber {let parent = fiber.return;while (parent !== null) {if (isHostParent(parent)) {return parent;}parent = parent.return;}invariant(false,'Expected to find a host parent. This error is likely caused by a bug ' +'in React. Please file an issue.',);
}function isHostParent(fiber: Fiber): boolean {return (fiber.tag === HostComponent ||fiber.tag === HostRoot ||fiber.tag === HostPortal);
}

显然意见，这个循环就是向上查找到第一个 HostComponent 或 HostRoot 或 HostPortal

之后，判断 parentFiber.tag，对不同条件的 isContainer 进行赋值
之后，判断 ContentReset 是否存在，存在则对文本节点进行替换

进入 getHostSibling 向上找到 sibling 节点，下面这个英文注释留着这个是查找sibling的核心算法

function getHostSibling(fiber: Fiber): ?Instance {// We're going to search forward into the tree until we find a sibling host// node. Unfortunately, if multiple insertions are done in a row we have to// search past them. This leads to exponential search for the next sibling.// TODO: Find a more efficient way to do this.let node: Fiber = fiber;// 这里定义一个while循环叫做 siblingssiblings: while (true) {// If we didn't find anything, let's try the next sibling.// 没有兄弟节点while (node.sibling === null) {if (node.return === null || isHostParent(node.return)) {// If we pop out of the root or hit the parent the fiber we are the// last sibling.return null;}node = node.return; // 向父级溯源}node.sibling.return = node.return; // 这里本就相同node = node.sibling; // 兄弟节点变成当前// 这个循环要找兄弟节点中的第一个dom节点// 如果兄弟节点不是 HostComponent 或 HostText 往下去找// 子节点中的第一个dom节点while (node.tag !== HostComponent && node.tag !== HostText) {// If it is not host node and, we might have a host node inside it.// Try to search down until we find one.// 当前是要替换的节点，就没有必要向下找了if (node.effectTag & Placement) {// If we don't have a child, try the siblings instead.continue siblings;}// If we don't have a child, try the siblings instead.// We also skip portals because they are not part of this host tree.// 像是这种，也没有必要继续找了               if (node.child === null || node.tag === HostPortal) {continue siblings;} else {node.child.return = node;node = node.child;}}// Check if this host node is stable or about to be placed.if (!(node.effectTag & Placement)) {// Found it!return node.stateNode;}}
}

接下去又进入一个while循环
- 里面的第一个判断，node.tag === HostComponent || node.tag === HostText
- 只有 HostComponent 和 HostText 才有插入dom的需要
- 注意，这里一系列的 if-else 是操作dom的核心
react真正展现给用户的是一棵dom树，而react中存储的是fiber树
而fiber树不会有每个节点对应的dom节点
以上是操作 commitPlacement 的源码处理，主要关注的是上述while循环和判断