React 18 源代码学习 11 completeUnitOf

workLoopSync 中会递归调用 performUnitOfWork，虽然看起来下述代码是一个循环，应该是 react 防止调用栈过深，难以中断而进行了拉平。 performUnitOfwork 会持续调用某个节点的 child 或 sibling 知道所有的子节点 生成以后，进入到此节点的
completeUnitOfWork

function workLoopSync() {
    // Perform work without checking if we need to yield between fiber.
    if (workInProgressIsSuspended && workInProgress !== null) {
      // The current work-in-progress was already attempted. We need to unwind
      // it before we continue the normal work loop.
      resumeSuspendedUnitOfWork(workInProgress);
    }

    while (workInProgress !== null) {
      performUnitOfWork(workInProgress);
    }
  }

completeUnitOfWork

completeUnitOfWork 是一个循环调用，持续向上 completeUnitOfWork，只到某个节点尚未 beginWork。

对于 HostComponent(5)

1. popHostContext
   弹出 fiberStack, React 应该是将递归向下的 fiber 。具体结构如下，
   Screen Shot 2022-09-10 at 21.21.34.png

本例中，实际 DOM 深度只有两层。fiberStack 中却有8层，前6个 fiber 都相同，即是 HostRoot(3)，后两个都相同，即是 HostComponent(5)

2. createInstance
   主要执行 domElement = ownerDocument.createElement(type)，通过 document.createElement 创建对应的 DOM 节点。

3. precacheFiberNode
   React 开始渲染时，会生成一个随机字符串，precacheFiberNode 会将 fiber 存储在
   对应的 DOM 中的 __reactFiber$xxxxxxxxxx 中 xxxxxxxxxx 是一个10位的随机字符串。

4. updateFiberProps
   element 对应的 props 也会存储在 DOM 中的 __reactProps$xxxxxxxxxx 中。

5. appendAllChildren
   将此节点所有的子节点放入到此节点内，执行 completeUnitOfWork 时，它的子节点都执行了 completeUnitOfWork

6. 将创建的 dom 放入 workInProgress.stateNode

7. 此节点还有 sibling，则 workInProgress = siblingFiber