React16源码: React中更新阶段中不同类型的expirationTime之pendingTime,suspendedTime以及pingedTime的源码实现

不同类型的 expirationTime

1 ）概述

• 在 react 中有几种不同类型的 expirationTime
  • pendingTime
  • suspendedTime
  • pingedTime

2 ）源码

2.1 关于 pendingTime

定位到 packages/react-reconciler/src/ReactFiberScheduler.js#L1788

function scheduleWork(fiber: Fiber, expirationTime: ExpirationTime) {
   
  const root = scheduleWorkToRoot(fiber, expirationTime);
  // ... 跳过很多代码
  markPendingPriorityLevel(root, expirationTime); // 注意这里
  // ... 跳过很多代码
}

• 所有创建更新都会通过调用 scheduleWork 来开始进行一个任务队列的调度的一个过程
• 因为对于调用 scheduleWork 进来的任务，都认为它是 pending 的任务
• pending 的任务就是一个等待渲染的一个任务, 这个任务因为没有经过任何的更新，没有经过像 suspend 这样的流程
• 所以它是一个新创建的任务，是一个pending的任务

定位到 packages/react-reconciler/src/ReactFiberPendingPriority.js#L19

进入 markPendingPriorityLevel

export function markPendingPriorityLevel(
  root: FiberRoot,
  expirationTime: ExpirationTime,
): void {
   
  // If there's a gap between completing a failed root and retrying it,
  // additional updates may be scheduled. Clear `didError`, in case the update
  // is sufficient to fix the error.
  root.didError = false;

  // Update the latest and earliest pending times
  const earliestPendingTime = root.earliestPendingTime;
  if (earliestPendingTime === NoWork) {
   
    // No other pending updates.
    root.earliestPendingTime = root.latestPendingTime = expirationTime;
  } else {
   
    if (earliestPendingTime < expirationTime) {
   
      // This is the earliest pending update.
      root.earliestPendingTime = expirationTime;
    } else {
   
      const latestPendingTime = root.latestPendingTime;
      if (latestPendin