React 18 源代码学习笔记 9 reconcileChil

reconcileChildren
reconcileChildren 可以生成下一个 workInProgress ，让下一次 workLoopSync 是用。主要调用流程如下。

1. reconcileChildFibers 对不同的 newChild.$$typeof 类型进行不同的操作。
   1. REACT_ELEMENT_TYPE (Symbol(react.element)) 执行 placeSingleChild
   2. REACT_PORTAL_TYPE (Symbol(react.portal)) 执行 placeSingleChild
   3. REACT_LAZY_TYPE (Symbol(react.lazy)) 执行 reconcileChildFibers
   4. 如果 newChild 是个数组，执行 reconcileChildrenArray
   5. 如果 newChild 是非空字符串或者数字，执行 placeSingleChild

placeSingleChild
此函数主要就是执行 createFiberFromElement，通过 element 创建 fiber，根据不同类型的 element type (class, function, string (div, span )) 创建 FiberNode。
placeSingleChild 生成的 fiber，放在 workInProgress.child 中。

至此第一个 fiberNode 已经生成，updateHostRoot 返回 workInProgress.child. 一直向上返回，直到 performUnitOfWork，放入到 next 中。

if (next === null) {
  // If this doesn't spawn new work, complete the current work.
  completeUnitOfWork(unitOfWork);
} else {
  workInProgress = next;
}

然后在 workLoopSync 重新进入到 performUnitOfWork。