React18源码: Fiber树中的优先级与帧栈模型

优先级{#lanes}

• 在全局变���中有不少变量都以Lanes命名
  • 如workInProgressRootRenderLanes, subtreeRenderLanes其作用见上文注释
  • 它们都与优先级相关
  • React中有3套优先级体系，并了解了它们之间的关联关系
  • 现在来看下fiber树构造过程中，车道模型Lane的具体应用
  • 在整个react-reconciler包中，Lane的应用可以分为3个方面：

    1 ） update优先级(update.lane){#update-lane}

    （）

    • update对象，它是一个环形链表.

    • 对于单个update对象来讲，update.lane代表它的优先级，称之为update优先

      （）

    • 观察其构造函数, 其优先级是由外界传入

      export function createUpdate(eventTime: number, lane: Lane): Update {  const update: Update = {    eventTime,    lane,    tag: UpdateState,    payload: null,    callback: null,    next: null,  }  return update;}

    • 在React体系中，有2种情况会创建update对象：

    • 1.应用初始化：在react-reconciler包中的updateContainer函数中

      export function updateContainer(  element: ReactNodelist,  container: OpaqueRoot,  parentComponent: ?React$Component,  callback: ?Function,):Lane {  const current = container.current;  const eventTime = requestEventTime();  const lane = requestUpdateLane(current); //根据当前时间，创建一个update优先级  const update = createUpdate(eventTime, lane); //lane被用于创建update对象  update.payload = { element };  enqueueUpdate(current, update);  scheduleUpdateOnFiber(current, lane, eventTime);  return lane;}

    • 发起组件更新: 假设在 class 组件中调用 setState

      const classComponentUpdater = {  isMounted,  enqueueSetState(inst, payload, callback) {    const fiber = getInstance(inst);    const eventTime = requestEventTime(); // 根据当前时间，创建一个update优先级    const lane = requestUpdateLane(fiber); // lane被用于创建update对象    const update = createUpdate(eventTime, lane);    update.payload = payload;    enqueueUpdate(fiber, update);    scheduleUpdateOnFiber(fiber, lane, eventTime);  },};

    • 可以看到，无论是应用初始化或者发起组件更新，创建update.lane的逻辑都是一样的

    • 都是根据当前时间，创建一个update优先级

      export function requestUpdateLane(fiber: Fiber): Lane {  // Special cases  const mode = fiber. mode;  if ((mode & BlockingMode) === NoMode) {    // legacy 模式    return (SyncLane: Lane);  } else if ((mode & ConcurrentMode) === NoMode) {    // blocking 模式    return getCurrentPrioritylevel() === ImmediateSchedulerPriority      ? (Synclane: Lane)      : (SyncBatchedLane: Lane);  }  //concurrent模式  if (currentEventWipLanes === NoLanes) {    currentEventWipLanes = workInProgressRootIncludedLanes;  }  const isTransition = requestCurrentTransition() !== NoTransition;  if(isTransition) {    // 特殊情况，处于suspense过程中    if (currentEventPendingLanes !== NoLanes) {      currentEventPendingLanes =        mostRecentlyUpdatedRoot !== null        ? mostRecentlyUpdatedRoot. pendingLanes        : NoLanes;    }    return findTransitionLane(currentEventWipLanes, currentEventPendingLanes);  }  // 正常情况，获取调度优先级  const schedulerPriority = getCurrentPriorityLevel();  let lane;  if (    (executionContext & DiscreteEventContext) !== NoContext &&    schedulerPriority === UserBlockingSchedulerPriority)  {    // executionContext 存在输入事件，且调度优先级是用户阻塞性质    lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);  } else {    // 调度优先级转换为车道模型    const schedulerLanePriority = schedulerPriorityToLanePriority(      schedulerPriority,    );    lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);  }  return lane;}

    • 可以看到requestUpdateLane的作用是返回一个合适的update优先级.

      • 1.legacy模：返回SyncLane
      • 2.blocking模式：返回SyncLane
      • 3.concurrent模式：
        • 正常情况下，根据当前的调度优先级来生成一个1ane.
        • 特殊情况下（处于suspense过程中），会优先选择TransitionLanes通道中的空闲通道
          • 如果所有TransitionLanes通道都被占用，就取最高优先级

          • 最后通过scheduleUpdateOnFiber(current, lane, eventTime);函数

          • 把 update.lane正式带入到了输入阶段

          • scheduleUpdateOnFiber是输入阶段的必经函数，此处以 update.lane 的视角分析：

            export function scheduleUpdateOnFiber(  fiber: Fiber,  lane:Lane,  eventTime: number,) {  if(lane === SyncLane) {    // legacyblocking模式    if (      (executionContext & LegacyUnbatchedContext) !== NoContext &&      (executionContext & (RenderContext CommitContext)) === NoContext    ) {      performSyncWorkOnRoot(root);    } else {      ensureRootIsScheduled(root,eventTime); // 注册回调任务      if (executionContext === NoContext) {        flushSyncCallbackQueue(); // 取消schedule调度，主动刷新回调队列，      }    }  } else {    // concurrent模式    ensureRootIsScheduled(root, eventTime);  }}

          • 当lane==SyncLane也就是legacy或blocking模式中，注册完回调任务之后

          • (ensureRootIsScheduled(root, eventTime)),如果执行上下文为空

          • 会取消schedule调度，主动刷新回调队列flushsyncCallbackQueue()

          • 这里包含了一个热点问题(setState到底是同步还是异步)的标准答案：

            • 如果逻辑进入 flushSyncCallbackQueue(executionContext == NoContext)
              • 则会主动取消调度，并刷新回调，立即进入fiber树构造过程
              • 当执行setState下一行代码时，fiber树已经重新渲染了，故setState体现为同步
              • 正常情况下，不会取消schedule调度
                • 由于schedule调度是通过MessageChannel触发（宏任务），故体现为异步

                  2 ) 渲染优先级(renderLanes)

                  • 这是一个全局概念，每一次render之前，首先要确定本次render的优先级，具体对应到源码如下：

                    //...省略无关代码function performSyncWorkOnRoot(root) {  let lanes;  let exitStatus;  //获取本次`render'的优先级  lanes = getNextLanes(root, lanes);  exitStatus = renderRootSync(root, lanes);}//...省略无关代码function performConcurrentWorkOnRoot(root) {  //获取本次`render`的优先级  let lanes = getNextLanes(    root,    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,  );  if (lanes === NoLanes){    return null;  }  let exitStatus = renderRootConcurrent(root, lanes);}

                  • 可以看到，无论是 Legacy 还是 Concurrent 模式，在正式 render 之前，都会调用 getNextLanes 获取一个优先级

                    //...省略部分代码export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {  // 1. check是否有等待中的lanes  const pendingLanes = root.pendingLanes;  if (pendinglanes === NoLanes) {    return_highestLanePriority = NoLanePriority;    return NoLanes;  }  let nextLanes = NoLanes;  let nextLanePriority = NoLanePriority;  const expiredLanes = root.expiredLanes;  const suspendedLanes = root.suspendedLanes;  const pingedLanes = root.pingedLanes;  // 2.check是否有已过期的Lanes  if (expiredlanes !== NoLanes) {    nextLanes = expiredLanes;    nextlanePriority = return_highestLanePriority = SynclanePriority;  } else {    const nonIdlePendingLanes = pendingLanes & NonIdleLanes;    if (nonIdlePendingLanes !== NoLanes) {      //非Idle任务...    } else {      //Idle任务...    }  }  if (nextLanes == NoLanes) {    return NoLanes;  }  return nextLanes;}

                  • getNextLanes 会根据 fiberRoot 对象上的属性(expiredLanes, suspendedLanes, pingedLanes等)

                  • 确定出当前最紧急的1anes

                  • 此处返回的lanes会作为全局渲染的优先级，用于fiber树构造过程中

                  • 针对fiber对象或update对象，只要它们的优先级（如：fiber.lanes和update.lane）比渲染优先级低，都将会被忽略

                    3 ) fiber优先级(fiber.lanes)

                    • 介绍过fiber对象的数据结构.其中有2个属性与优先级相关：

                      • 1.fiber.lanes

                        • 代表本节点的优先级

                        • 2.fiber.childLanes

                          • 代表子节点的优先级从FiberNode的构造函数中可以看出
                          • fiber.lanes 和 fiber.childLanes的初始值都为NoLanes
                          • 在fiber树构造过程中，使用全局的渲染优先级 ( renderLanes)和 fiber.lanes 判断 fiber 节点是否更新.
                            • 如果全局的渲染优先级rendertanes不包括fiber.lanes
                            • 证明该fiber节点没有更新，可以复用.
                            • 如果不能复用，进入创建阶段

                              function beginWork(  current: Fiber| null,  workInProgress: Fiber,  renderLanes: Lanes,): Fiber | null {  const updatelanes = workInProgress.lanes;  if(current !== null) {    const oldProps = current.memoizedProps;    const newProps = workInProgress.pendingProps;    if(      oldProps !== newProps ||      hasLegacyContextChanged()      // Force a re-render if the implementation changed due to hot reload:      (_DEV__ ? workInProgress.type !== current. type : false)    ) {      didReceiveUpdate = true;    } else if (!includesSomeLane(renderLanes, updateLanes)) {      didReceiveUpdate = false;      //本`fiber`节点的没有更新，可以复用，进入bailout逻辑      return bailoutOnAlreadyFinishedwork(current, workInProgress, renderlanes);    }  }  // 不能复用，创建新的fiber节点  workInProgress.lanes = NoLanes;//重优为 NoLanes  switch (workInProgress.tag) {    case ClassComponent: {      const Component = workInProgress.type;      const unresolvedProps = workInProgress. pendingProps;      const resolvedProps =        workInProgress.elementType === Component        ? unresolvedProps        : resolveDefaultProps(Component, unresolvedProps);      return updateClassComponent(        current,        workInProgress,        Component,        resolvedProps,        // 正常情况下渲染优先级会被用于fier树的构透过程        renderLanes,      );    }  }}

                              栈帧管理

                              • 在React源码中，每一次执行fiber树构造

                                • 也就是调用performSyncWorkOnRoot或者performConcurrentWorkOnRoot函数的过程
                                • 都需要一些全局变量来保存状态

                                • 如果从单个变量来看，它们就是一个个的全局变量.

                                • 如果将这些全局变量组合起来，它们代表了当前fiber树构造的活动记录

                                • 通过这一组全局变量，可以还原fiber树构造过程

                                • 比如时间切片的实现过程fiber树构造过程被打断之后需要还原进度，全靠这一组全局变量

                                • 所以每次fiber树构造是一个独立的过程，需要独立的一组全局变量

                                • 在React内部把这一个独立的过程封装为一个栈帧stack

                                • 简单来说就是每次构造都需要独立的空间

                                • 所以在进行fiber树构造之前，如果不需要恢复上一次构造进度，都会刷新栈帧（源码在prepareFreshStack函数）

                                  function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {  const prevExecutionContext = executionContext;  executionContext |= RenderContext;  const prevDispatcher = pushDispatcher();  // 如果fiberRoot变动，或者update.lane变动，都会刷新栈帧，丢弃上一次渲染进度  if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {    resetRenderTimer();    // 刷新找帧    prepareFreshStack(root, lanes);    startWorkOnPendingInteractions(root, lanes);  }}// 刷新栈帧；重置FiberRoot上的全局属性和`fiber树构造'循环过程中的全局变量function prepareFreshStack(root: FiberRoot, lanes: Lanes) {  // 重置FiberRoot对象上的属性  root.finishedWork = null;  root.finishedLanes = NoLanes;  const timeoutHandle = root.timeoutHandle;  if(timeoutHandle !== noTimeout) {    root.timeoutHandle = noTimeout;    cancelTimeout(timeoutHandle);  }  if (workInProgress !== null) {    let interruptedWork = workInProgress.return;    while (interruptedWork !== null){      unwindInterruptedWork(interruptedWork);      interruptedWork =interruptedWork.return;    }  }  // 重置全局变量  workInProgressRoot = root;  workInProgress = createWorkInProgress(root.current, null); // 给HostRootFiber对象创建一个alternate  workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lane  workInProgressRootExitStatus = RootIncomplete;  workInProgressRootFatalError = null;  workInProgressRootSkippedlanes = NoLanes;}

                                • 注意其中的 createWorkInProgress(root.current, null)

                                • 其参数 root.current 即 HostRootFiber

                                • 作用是给 HostRootFiber 创建一个 alternate副本

                                • workInProgress 指针指向这个副本, 即 workInProgress = HostRootFiber.alternate

                                • 在前文 double buffering 中分析过，HostRootFiber.alternate 是正在构造的fiber树的根节点