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<any, any>,
    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树的根节点