Fiber Schedule

/packages/react-reconciler/src/ReactFiberScheduler.js

概念

expirationTime

• 用来定义更新任务的优先级。expirationTime 越大优先级越高，初始值为 NoWork = 0。
• expirationTime 是相对于调度器初始调用的起始时间而言的一个时间段；调度器初始调用后的某一段时间内，需要调度完成这项更新，这个时间段长度值就是到期时间值。
• React 中有两种类型的 expirationTime，一个是 Interactive 的，比如说是由事件触发的，那么他的响应优先级会比较高因为涉及到交互。另一种是异步，优先级相对较低。

alternate

可以理解为一个 fiber 版本池，用于交替记录组件更新（切分任务后变成多阶段更新）过程中 fiber 的更新，因为在组件更新的各阶段，更新前及更新过程中 fiber 状态并不一致，在需要恢复时（如，发生冲突），即可使用另一者直接回退至上一版本 fiber。

• 使用 alternate 属性双向连接一个当前 fiber 和其 work-in-progress，当前 fiber.alternate 指向其 work-in-progress，work-in-progress.alternate 指向当前稳定fiber；
• 当前 fiber 的替换版本是其 work-in-progress，work-in-progress 的交替版本是当前 fiber；
• 当 work-in-progress 更新一次后，将同步至当前 fiber，然后继续处理，同步直至任务完成；
• work-in-progress 指向处理过程中的fiber，而当前 fiber 总是维护处理完成的最新版本的 fiber。

源码

function scheduleWork(fiber: Fiber, expirationTime: ExpirationTime) {
  const root = scheduleWorkToRoot(fiber, expirationTime);
  // isWorking 代表正在进行渲染
  // nextRenderExpirationTime 是全局变量
  // nextRenderExpirationTime 在是新的 renderRoot 的时候会被设置为当前任务的expirationTime
  // 一旦他被设置，只有当下次任务是 NoWork 的时候他才会被再次设置为 NoWork，初始值也是 NoWork
  if (
    !isWorking &&
    nextRenderExpirationTime !== NoWork &&
    expirationTime > nextRenderExpirationTime
  ) {
    // This is an interruption. (Used for performance tracking.)
    // 当前新的高优先级的任务打断了老的低优先级任务的执行
    // interruptedBy 主要是用于告知 devtool 任务在哪里被打断了，没有实际用途
    interruptedBy = fiber;
    resetStack();
  }
  // root.expirationTime 与 入参的 expirationTime 不一定相等
  markPendingPriorityLevel(root, expirationTime);
  if (
    // If we're in the render phase, we don't need to schedule this root
    // for an update, because we'll do it before we exit...
    // isWorking 包含 render 和 commit 阶段
    !isWorking ||
    // 说明上一次的更新已经结束了
    // commit 阶段（把更新之后的 Fiber 转为真实 DOM 的更新）不可打断，render 可以？
    // isCommitting 只有在 commitRoot 函数中某个阶段会被设置为true，最终还是会被设置为 false
    isCommitting ||
    // ...unless this is a different root than the one we're rendering.
    // 对于单个 root 而言，nextRoot === root，因此一般情况无需考虑这个
    nextRoot !== root
  ) {
    // expirationTime 和 nextExpirationTimeToWorkOn
    const rootExpirationTime = root.expirationTime;
    requestWork(root, rootExpirationTime);
  }
  // 用来防止组件更新流程中出现死循环
  if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
    // Reset this back to zero so subsequent updates don't throw.
    nestedUpdateCount = 0;
  }
}

根据 Fiber 节点查找对应的 root，并且在找的过程中更新节点的 expirationTime

function scheduleWorkToRoot(fiber: Fiber, expirationTime): FiberRoot | null {
  recordScheduleUpdate();
  // Update the source fiber's expiration time
  if (fiber.expirationTime < expirationTime) {
    // fiber 为当前产生更新的组件对应的 Fiber
    // fiber.expirationTime 初始值为 NoWork = 0
    // 设置为优先级更高的 expirationTime，expirationTime 越大优先级越高
    // 16.6之前是越小越高
    // 更新完成之后会移除 expirationTime，expirationTime
    fiber.expirationTime = expirationTime;
  }
  // 更新 alternate 的 expirationTime
  let alternate = fiber.alternate;
  if (alternate !== null && alternate.expirationTime < expirationTime) {
    alternate.expirationTime = expirationTime;
  }
  // Walk the parent path to the root and update the child expiration time.
  // 以下代码是遍历父节点直到root，并且依次更新子节点的 expirationTime，使其保留优先级最高的 expirationTime
  // node 就是父节点
  let node = fiber.return;
  let root = null;
  // 只有 root 的父节点为 null，HostRoot 就是 RootFiber
  if (node === null && fiber.tag === HostRoot) {
    root = fiber.stateNode; // 就是 FiberRoot
  } else {
    while (node !== null) {
      alternate = node.alternate;
      // expirationTime 是当前 Fiber 更新产生的 expirationTime
      // childExpirationTime 是 node 子树中优先级最高的（最大的）expirationTime
      if (node.childExpirationTime < expirationTime) {
        node.childExpirationTime = expirationTime;
        if (
          // alternate 是 node 的备份
          alternate !== null &&
          alternate.childExpirationTime < expirationTime
        ) {
          alternate.childExpirationTime = expirationTime;
        }
      } else if (
        alternate !== null &&
        alternate.childExpirationTime < expirationTime
      ) {
        alternate.childExpirationTime = expirationTime;
      }
      if (node.return === null && node.tag === HostRoot) {
        root = node.stateNode;
        break;
      }
      node = node.return;
    }
  }
  return root;
}

状态回退到打断之前，即没有更新的状态

function resetStack() {
  // nextUnitOfWork 是下一个需要进行更新的节点
  if (nextUnitOfWork !== null) {
    // nextUnitOfWork 不为空说明之前执行的是异步任务，由于时间片不够，把执行权交还给了浏览器，更新中途被打断
    let interruptedWork = nextUnitOfWork.return;
    while (interruptedWork !== null) {
      // 状态回退到打断之前，即没有更新的状态
      unwindInterruptedWork(interruptedWork);
      interruptedWork = interruptedWork.return;
    }
  }
  // 重置变量值
  nextRoot = null;
  nextRenderExpirationTime = NoWork;
  nextLatestAbsoluteTimeoutMs = -1;
  nextRenderDidError = false;
  nextUnitOfWork = null;
}