关于javascript:React和DOM的那些事节点删除算法

6次阅读

共计 4786 个字符，预计需要花费 12 分钟才能阅读完成。

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

本篇是具体解读 React DOM 操作的第一篇文章，文章所讲的内容产生在 commit 阶段。

Fiber 架构使得 React 须要保护两类树结构，一类是 Fiber 树，另一类是 DOM 树。当删除 DOM 节点时，Fiber 树也要同步变动。但请留神删除操作执行的机会：在实现 DOM 节点的其余变动（增、改）前，要先删除 fiber 节点，防止其余操作被烦扰。 这是因为进行其余 DOM 操作时须要循环 fiber 树，此时如果有须要删除的 fiber 节点却还没删除的话，就会产生凌乱。

function commitMutationEffects(
  firstChild: Fiber,
  root: FiberRoot,
  renderPriorityLevel,
) {
  let fiber = firstChild;
  while (fiber !== null) {

    // 首先进行删除
    const deletions = fiber.deletions;
    if (deletions !== null) {commitMutationEffectsDeletions(deletions, root, renderPriorityLevel);
    }
    // 如果删除之后的 fiber 还有子节点，// 递归调用 commitMutationEffects 来解决
    if (fiber.child !== null) {
      const primarySubtreeTag = fiber.subtreeTag & MutationSubtreeTag;
      if (primarySubtreeTag !== NoSubtreeTag) {commitMutationEffects(fiber.child, root, renderPriorityLevel);
      }
    }

    if (__DEV__) {/*...*/} else {
      // 执行其余 DOM 操作
      try {commitMutationEffectsImpl(fiber, root, renderPriorityLevel);
      } catch (error) {captureCommitPhaseError(fiber, error);
      }
    }
    fiber = fiber.sibling;
  }
}

fiber.deletions 是 render 阶段的 diff 过程检测到 fiber 的子节点如果有须要被删除的，就会被加到这里来。

commitDeletion函数是删除节点的入口，它通过调用 unmountHostComponents 实现删除。搞懂删除操作之前，先看看场景。

有如下的 Fiber 树，Node（Node 是一个代号，并不指的某个具体节点）节点行将被删除。

                    Fiber 树

                   div#root
                      |
                    <App/>
                      |
                     div
                      |
                   <Parent/>
                      |
 Delation   -->      Node
                      |     ↖
                      |       ↖
                      P ——————> <Child>
                                  |
                                  a

通过这种场景能够揣测出当删除该节点时，它下体面树中的所有节点都要被删除。当初间接以这个场景为例，走一下删除过程。这个过程实际上也就是 unmountHostComponents 函数的运行机制。

删除过程

删除 Node 节点须要父 DOM 节点的参加：

parentInstance.removeChild(child)

所以首先要定位到父级节点。过程是在 Fiber 树中，以 Node 的父节点为终点往上找，找到的第一个原生 DOM 节点即为父节点。在例子中，父节点就是 div。尔后以 Node 为终点，遍历子树，子树也是 fiber 树，因而遍历是深度优先遍历，将每个子节点都删除。

须要特地留神的一点是，对循环节点进行删除，每个节点都会被删除操作去解决，这里的每个节点是 fiber 节点而不是 DOM 节点。DOM 节点的删除机会是从 Node 开始遍历进行删除的时候，遇到了第一个原生 DOM 节点（HostComponent 或 HostText）这个时刻，在删除了它子树的所有 fiber 节点后，才会被删除。

以上是残缺过程的简述，对于具体过程要明确几个要害函数的职责和调用关系才行。删除 fiber 节点的是 unmountHostComponents 函数，被删除的节点称为指标节点，它的职责为：

  1. 找到指标节点的 DOM 层面的父节点
  2. 判断指标节点如果是原生 DOM 类型的节点，那么执行 3、4，否则先卸载本人之后再往下找到原生 DOM 类型的节点之后再执行 3、4
  3. 遍历子树执行 fiber 节点的卸载
  4. 删除指标节点的 DOM 节点

其中第 3 步的操作，是通过 commitNestedUnmounts 实现的，它的职责很繁多也很明确，就是遍历子树卸载节点。

而后具体到每个节点的卸载过程，由 commitUnmount 实现。它的职责是

  1. Ref 的卸载
  2. 类组件生命周期的调用
  3. HostPortal 类型的 fiber 节点递归调用 unmountHostComponents 反复删除过程

上面来看一下不同类型的组件它们的具体删除过程是怎么的。

辨别被删除组件的类别

Node 节点的类型有多种可能性，咱们以最典型的三种类型（HostComponent、ClassComponent、HostPortal）为例别离阐明一下删除过程。

首先执行unmountHostComponents，会向上找到 DOM 层面的父节点，而后依据上面的三种组件类型别离解决，咱们挨个来看。

HostComponent

Node 是 HostComponent，调用commitNestedUnmounts，以 Node 为终点，遍历子树，开始对所有子 Fiber 进行卸载操作，遍历的过程是深度优先遍历。

 Delation   -->      Node(span)
                      |    ↖
                      |       ↖
                      P ——————> <Child>
                                  |
                                  a

对节点一一执行 commitUnmount 进行卸载，这个遍历过程其实对于三种类型的节点，都是相似的，为了节俭篇幅，这里只表述一次。

Node 的 fiber 被卸载，而后向下，p 的 fiber 被卸载，p 没有 child，找到它的 sibling<Child>，<Child>的 fiber 被卸载，向下找到 a，a 的 fiber 被卸载。此时到了整个子树的叶子节点，开始向上 return。由 a 到 <Child>，再回到 Node，遍历卸载的过程完结。

在子树的所有 fiber 节点都被卸载之后，才能够平安地将 Node 的 DOM 节点从父节点中移除。

ClassComponent

 Delation   -->      Node(ClassComponent)
                      |
                      |
                     span
                      |    ↖
                      |       ↖
                      P ——————> <Child>
                                  |
                                  a

Node 是 ClassComponent，它没有对应的 DOM 节点，要先调用 commitUnmount 卸载它本人，之后会先往下找，找到第一个原生 DOM 类型的节点 span，以它为终点遍历子树，确保每一个 fiber 节点都被卸载，之后再将 span 从父节点中删除。

HostPortal

                                  div2(Container Of Node)
                                ↗
                     div   containerInfo
                      |    ↗
                      |  ↗
 Delation   -->      Node(HostPortal)
                      |
                      |
                     span
                      |    ↖
                      |       ↖
                      P ——————> <Child>
                                  |
                                  a

Node 是 HostPortal，它没有对应的 DOM 节点，因而删除过程和 ClassComponent 基本一致，不同的是删除它上面第一个子 fiber 的 DOM 节点时不是从这个被删除的 HostPortal 类型节点的 DOM 层面的父节点中删除，而是从 HostPortal 的 containerInfo 中移除，图示上为 div2，因为 HostPortal 会将子节点渲染到父组件以外的 DOM 节点。

以上是三种类型节点的删除过程，这里值得注意的是，unmountHostComponents函数执行到遍历子树卸载每个节点的时候，一旦遇到 HostPortal 类型的子节点，会再次调用unmountHostComponents，以它为指标节点再进行它以及它子树的卸载删除操作，相当于一个递归过程。

commitUnmount

HostComponent 和 ClassComponent 的删除都调用了 commitUnmount，除此之外还有 FunctionComponent 也会调用它。它的作用对三种组件是不同的：

  • FunctionComponent 函数组件中一旦调用了 useEffect，那么它卸载的时候要去调用 useEffect 的销毁函数。（useLayoutEffect 的销毁函数是调用 commitHookEffectListUnmount 执行的）
  • ClassComponent 类组件要调用 componentWillUnmount
  • HostComponent 要卸载 ref
function commitUnmount(
  finishedRoot: FiberRoot,
  current: Fiber,
  renderPriorityLevel: ReactPriorityLevel,
): void {onCommitUnmount(current);

  switch (current.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent:
    case Block: {const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
      if (updateQueue !== null) {
        const lastEffect = updateQueue.lastEffect;
        if (lastEffect !== null) {
          const firstEffect = lastEffect.next;

          let effect = firstEffect;
          do {const {destroy, tag} = effect;
            if (destroy !== undefined) {if ((tag & HookPassive) !== NoHookEffect) {
                // 向 useEffect 的销毁函数队列里 push effect
                enqueuePendingPassiveHookEffectUnmount(current, effect);
              } else {
                // 尝试应用 try...catch 调用 destroy
                safelyCallDestroy(current, destroy);
                ...
              }
            }
            effect = effect.next;
          } while (effect !== firstEffect);
        }
      }
      return;
    }
    case ClassComponent: {safelyDetachRef(current);
      const instance = current.stateNode;
      // 调用 componentWillUnmount
      if (typeof instance.componentWillUnmount === 'function') {safelyCallComponentWillUnmount(current, instance);
      }
      return;
    }
    case HostComponent: {
      // 卸载 ref
      safelyDetachRef(current);
      return;
    }
    ...
  }
}

总结

咱们来复盘一下删除过程中的重点：

  • 删除操作执行的机会
  • 删除的指标是谁
  • 从哪里删除

mutation 在基于 Fiber 节点对 DOM 做其余操作之前，须要先删除节点，保障留给后续操作的 fiber 节点都是无效的。删除的指标是 Fiber 节点及其子树和 Fiber 节点对应的 DOM 节点，整个轨迹循着 fiber 树，对指标节点和所有子节点都进行卸载，对指标节点对应的（或之下的第一个）DOM 节点进行删除。对于原生 DOM 类型的节点，间接从其父 DOM 节点删除，对于 HostPortal 节点，它会把子节点渲染到内部的 DOM 节点，所以会从这个 DOM 节点中删除。明确以上三个点再联合上述梳理的过程，就能够逐步理清删除操作的脉络。

欢送扫码关注公众号，发现更多技术文章

正文完
javascript
发表至： javascript
2021-01-21
 0
前端安全问题及解决办法
reacttransitiongroup动画库Transition组件使用
关于javascript:来自大厂-10-前端面试题附答案整理版
JS事件Bom对象和Dom对象1乐字节架构

站内搜索

-「」