React短文系列 遍历fiber树 App的创建

从createRoot到App节点的创建

createRoot->renderRootSync->prepareFreshStack->workLoopSync->HostRoot:updateHostRoot->reconcileChildren创建节点：FiberRootNode->HostRootFiber->App。

1. createRoot->renderRootSync->prepareFreshStack(root,lanes) 这一步创建出了FiberRootNode和HostRootFiber节点。

   a. createRoot创建了FiberRootNode

   b. prepareFreshStack根据FiberRootNode创建HostRootFiber。

   c. HostRootFiber是HostRoot的FiberNode，对应<div id="root"></div>

   d. root是FiberRootNode,root.current是HostRootFiber,复制一份赋值给rootWorkInProgress是第一个workInProgress。

2. workLoopSync->beginWork->HostRoot:updateHostRoot(current,workInProgress,)->reconcileChildren 马上进入到了workLoopSync创建出App

   a. current和wip是上面的HostRootFiber。

   b. 进入到reconcileChildren，创建HostRootFiber的子节点App。

createRoot-renderRootSync:
  // root是fiberRootNode, tag=1
  prepareFreshStack(root, lanes)  //这一步创建tag=3,HostRoot,HostRootFiber,rootElement 的wip

  do {
    try {
      workLoopSync();  //这一步创建tag=3的子fiber，因为进入到beginWork-updateHostRoot-reconcileChildren
      break;
    } catch (thrownValue) {
      handleError(root, thrownValue);
    }
  } while (true);

prepareFreshStack:
  var rootWorkInProgress = createWorkInProgress(root.current, null);
  return rootWorkInProgress; // tag=3
createWorkInProgress:
  workInProgress.alternate = current; //创建tag=3的cur的wip
  current.alternate = workInProgress;

workLoopSync-beginWork:
case HostRoot:
      return updateHostRoot(current, workInProgress, renderLanes);
updateHostRoot:
    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
reconcileChildren:
  if (current === null) {
    // 2.然后遍历到App节点进入这里创建App节点的子节点
    workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderLanes);
  } else {
    // 1.首先HostRootFiber进入这里创建子节点App节点
    workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren, renderLanes);
  }
}

一些特点

1. fiberRootNode tag=1，HostRootNode tag=3，App tag=2
2. current节点是current树当前遍历到的节点，workInProgress节点是workInProgress树当前遍历到的节点。
3. current节点和wip节点通过alternate相互指向。第一次渲染，HostRootFiber的current节点不是空的，但是App节点的current节点是空的null。

通常不画null,如图左所示。

5. 创建完wip树后切换current树，图3