IWSR

function lazy<T extends ComponentType<any>>(
    factory: () => Promise<{ default: T }>
): LazyExoticComponent<T>;

function mountLazyComponent(
  _current,
  workInProgress,
  elementType,
  renderLanes,
) {
  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);

  const props = workInProgress.pendingProps;
  const lazyComponent: LazyComponentType<any, any> = elementType;
  const payload = lazyComponent._payload;
  const init = lazyComponent._init;
  let Component = init(payload);
  ...
  // 底下的不用关注，init 函数内就会通过 throw 中断，见下面的代码
}

// mountLazyComponent 内调用的 init
function lazyInitializer<T>(payload: Payload<T>): T {
  if (payload._status === Uninitialized) {
    // 此时的 payload._result 为 import OtherComponent 部分，其调用将返回一个 pending 的 promise
    const ctor = payload._result;
    const thenable = ctor();
    // 此处为 promise 实例增加了回掉，但加载成功之后重新渲染的逻辑并不在此处
    thenable.then(
      moduleObject => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const resolved: ResolvedPayload<T> = (payload: any);
          resolved._status = Resolved;
          resolved._result = moduleObject;
        }
      },
      error => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const rejected: RejectedPayload = (payload: any);
          rejected._status = Rejected;
          rejected._result = error;
        }
      },
    );
    if (payload._status === Uninitialized) {
      // first pass 时会进入此逻辑，将状态由 Uninitialized 修改为 Pending
      const pending: PendingPayload = (payload: any);
      pending._status = Pending;
      pending._result = thenable;
    }
  }
  if (payload._status === Resolved) {
    const moduleObject = payload._result;
    ...dev 内容
    return moduleObject.default;
  } else {
    // first pass 将会将 pending 状态的 promise 丢出去
    // 并被外置 try catch 捕获
    throw payload._result;
  }
}

function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {
  // 底下是维护 pingCache 的逻辑，并非阅读重点
  let pingCache = root.pingCache;
  let threadIDs;
  if (pingCache === null) {
    pingCache = root.pingCache = new PossiblyWeakMap();
    threadIDs = new Set();
    pingCache.set(wakeable, threadIDs);
  } else {
    threadIDs = pingCache.get(wakeable);
    if (threadIDs === undefined) {
      threadIDs = new Set();
      pingCache.set(wakeable, threadIDs);
    }
  }
  if (!threadIDs.has(lanes)) {
    // Memoize using the thread ID to prevent redundant listeners.
    threadIDs.add(lanes);
    // ping 函数内会通过对 ensureRootIsScheduled 的调用来触发任务调度
    // ensureRootIsScheduled 的解析可以看我的 [useState](https://github.com/IWSR/react-code-debug/issues/3) 的解析
    const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes);
    if (enableUpdaterTracking) {
      if (isDevToolsPresent) {
        // If we have pending work still, restore the original updaters
        restorePendingUpdaters(root, lanes);
      }
    }
    // 此处的 wakeable 是之前 pending 的 promise，也就是说 ConcurrentMode 模式下异步组件的成功请求也可能触发 ensureRootIsScheduled
    wakeable.then(ping, ping);
  }
}

function attachRetryListener(
  suspenseBoundary: Fiber,
  root: FiberRoot,
  wakeable: Wakeable,
  lanes: Lanes,
) {
  // Retry listener
  //
  // If the fallback does commit, we need to attach a different type of
  // listener. This one schedules an update on the Suspense boundary to turn
  // the fallback state off.
  //
  // Stash the wakeable on the boundary fiber so we can access it in the
  // commit phase.
  //
  // When the wakeable resolves, we'll attempt to render the boundary
  // again ("retry").
  const wakeables: Set<Wakeable> | null = (suspenseBoundary.updateQueue: any);
  if (wakeables === null) {
    const updateQueue = (new Set(): any);
    updateQueue.add(wakeable);
    suspenseBoundary.updateQueue = updateQueue;
  } else {
    wakeables.add(wakeable);
  }
}

function completeUnitOfWork(unitOfWork: Fiber): void {
  let completedWork = unitOfWork;
  do {
    const current = completedWork.alternate; // WIP 对应的 current节点
    const returnFiber = completedWork.return; // 父节点

    if ((completedWork.flags & Incomplete) === NoFlags) {
      // 如果当前节点没有出错（没有标记 Incomplete ），进入该逻辑
			...
      let next;
      ... 删掉了不重要的部分
      // completeWork 的作用大致为生成DOM 更新props 绑定事件，详细的建议看别的文章
      next = completeWork(current, completedWork, subtreeRenderLanes);

      if (next !== null) {
        // Completing this fiber spawned new work. Work on that next.
        workInProgress = next;
        return;
      }
    } else {
      // 运行至此代表节点带有 Incomplete 标记
      // 当 unwindWork 遇到带有 ShouldCapture 标记的节点时会将该节点标记 DidCapture 后返回
      // unwindWork 内的 (flags & ~ShouldCapture) | DidCapture 这段标记的 DidCapture
      // 而带有 ShouldCapture 标记的节点通常也被称为错误边界，可以说 unwindWork 这个函数的作用
      const next = unwindWork(current, completedWork, subtreeRenderLanes);

      // Because this fiber did not complete, don't reset its lanes.

      if (next !== null) {
        /**
         * 在这个例子内 SuspenseComponent 带有 ShouldCapture 因此在遇到 SuspenseComponent 后将其上与错误处理相关的标记清除
         * 
         * 关于标记清除的逻辑可以看下面
         *
         * 0b0000000000001000000000000000 Incomplete      
         * 0b0000000000010000000000000000 ShouldCapture  
         * 0b0000000000011000000000000000 同时带有 Incomplete 与 ShouldCapture 的标记的节点
         * 0b0000000000000111111111111111 HostEffectMask
         * 0b0000000000000000000000000000 如果将上面两个标记进行按位与（=&）能得到的，很明显能看到 Incomplete 与 ShouldCapture 标记位消失了
        */
        next.flags &= HostEffectMask;
        // 此处为将 suspense 节点赋值给 workInProgress
        workInProgress = next;
        // return 出去后会再次进入 workLoopSync/workLoopConcurrent，随后再从 workInProgress 开始进行 beginWork
        // 也就是说，从这里开始我们将再此对 suspense 节点进行 beginWork，而这也代表着 The second pass 的开始
        return;
      }

      ... 省略不必要的逻辑

      if (returnFiber !== null) {
        // Mark the parent fiber as incomplete and clear its subtree flags.
        // 给当前 fiber 的父节点标记 Incomplete
        returnFiber.flags |= Incomplete;
        returnFiber.subtreeFlags = NoFlags;
        returnFiber.deletions = null;
      } else {
        // We've unwound all the way to the root.
        workInProgressRootExitStatus = RootDidNotComplete;
        workInProgress = null;
        return;
      }
    }

    const siblingFiber = completedWork.sibling;
    if (siblingFiber !== null) {
      // If there is more work to do in this returnFiber, do that next.
      // 如果存在兄弟节点，对兄弟节点进行 beginWork，见 workLoopSync/workLoopConcurrent 内 while 的条件
      workInProgress = siblingFiber;
      return;
    }
    // Otherwise, return to the parent
		// workInProgress 指向当前节点的父节点 然后继续 do...while... 循环
    completedWork = returnFiber;
    // Update the next thing we're working on in case something throws.
    workInProgress = completedWork;
  } while (completedWork !== null);

  // 已经到 root 节点了，标记 workInProgressRootExitStatus 为完成状态
  if (workInProgressRootExitStatus === RootInProgress) {
    workInProgressRootExitStatus = RootCompleted;
  }
}

function updateSuspenseComponent(current, workInProgress, renderLanes) {
  const nextProps = workInProgress.pendingProps;

  let suspenseContext: SuspenseContext = suspenseStackCursor.current;

  let showFallback = false;
  // 判断当前 fiber 上是否标记 DidCapture
  const didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;

  if (
    didSuspend ||
    shouldRemainOnFallback(
      suspenseContext,
      current,
      workInProgress,
      renderLanes,
    )
  ) {
		// 存在 DidCapture 标记，因此需要 showFallback
    showFallback = true;
    // 将 DidCapture 从节点标记上清除
    workInProgress.flags &= ~DidCapture;
  } else {
    ... The second pass 不会进入就删了
  }

	...
  
  if (current === null) {
    ... 删除 hydrate 相关代码
    // This could've been a dehydrated suspense component.
    const suspenseState: null | SuspenseState = workInProgress.memoizedState;
    ...

    const nextPrimaryChildren = nextProps.children;
    const nextFallbackChildren = nextProps.fallback;

    if (showFallback) {
      // second pass 时 showFallback 为 true
      // 这里返回的 fallback 的 fiber，底下截图有介绍内部的大致逻辑
      const fallbackFragment = mountSuspenseFallbackChildren(
        workInProgress,
        nextPrimaryChildren,
        nextFallbackChildren,
        renderLanes,
      );
      const primaryChildFragment: Fiber = (workInProgress.child: any);
      primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
        renderLanes,
      );
      workInProgress.memoizedState = SUSPENDED_MARKER;
      ...
			// 接下来要创建 fallback 的节点了
      return fallbackFragment;
    } else if (
      enableCPUSuspense &&
      typeof nextProps.unstable_expectedLoadTime === 'number'
    ) {
      ...
    } else {
     	...
    }
  } else {
    ... 
}