React 18 源代码学习笔记 5 performConcur

首先值得注意的是，第一次渲染的时候，调用的是 renderRootSync 即同步模式，其他的情况可能会调用 renderRootConcurrent 即并发模式。

1. prepareFreshStack
   开始执行时，workInProgressRoot 尚未初始化，还是 null，在 prepareFreshStack 中对 workInProgressRoot 进行了初始化为当前尚未渲染的 FiberRootNode，并额外 初始化了 workInProgressXxx。此时整个 fiber tree 都尚未开始初始化，顶部的结构如下。

Screen Shot 2022-09-03 at 10.16.01.png

2. workLoopSync
   这是生成 fiber tree 的主循环

// The work loop is an extremely hot path. Tell Closure not to inline it.
/** @noinline */
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);
  }
}