React18源码: React中的LanePriority和SchedulerPriority

优先级区别和联系

• 在源码中，3种优先级位于不同的js文件，是相互独立的
• 注意：
  • LanePriority 和 SchedulerPriority 从命名上看，它们代表的是优先级
  • ReactPriorityLevel 从命名上看，它代表的是等级而不是优先级
    • 它用于衡量 LanePriority 和 Schedulerpriority

LanePriority

• LanePriority: 属 react-reconciler 包，定义于 ReactFiberLane.js

  export const SyncLanePriority: LanePriority = 15;
  export const SyncBatchedLanePriority: LanePriority = 14;
  
  const InputDiscreteHydrationLanePriority: LanePriority = 13;
  export const InputDiscreteLanePriority: LanePriority = 12;
  
  // ...
  
  const OffscreenLanePriority: LanePriority = 1;
  export const NoLanePriority: LanePriority = 0;
  

• 与fiber构造过程相关的优先级（如fiber.updateQueue,fiber.lanes)都使用LanePriority.

• 由于本节重点介绍优先级体系以及它们的转换关系，关于Lane(车道模型)在fiber树构造时使用

SchedulerPriority

• SchedulerPriority，属于scheduler包，定义于 SchedulerPriorities.js 中

  export const NoPriority = 0;
  export const ImmediatePriority = 1;
  export const UserBlockingPriority = 2;
  export const NormalPriority = 3;
  export const LowPriority = 4;
  export const IdlePriority = 5;
  

• 与scheduler调度中心相关的优先级使用 SchedulerPriority

ReactPriorityLevel

• reactPriorityLevel, 属于react-reconciler包，定义于 SchedulerWithReactIntegration.js中

  export const ImmediatePriority: ReactPrioritylevel = 99;
  export const UserBlockingPriority: ReactPriorityLevel = 98;
  export const NormalPriority: ReactPriorityLevel = 97;
  export const LowPriority: ReactPriorityLevel = 96;
  export const IdlePriority: ReactPriorityLevel = 95;
  // NoPriority is the absence of priority. Also React-only.
  export const NoPriority: ReactPriorityLevel = 90;
  

• LanePriority 与 SchedulerPriority 通过 ReactPriorityLevel 进换

转换关系

• 为了能协同调度中心(scheduler 包) 和 fiber树构造(react-reconciler包)中对优先级的使用

• 则需要转换 SchedulerPriority 和 LanePriority, 转换的桥梁正是 ReactPriorityLevel

• 在 SchedulerWithReactIntegration.js 中，可以互转 SchedulerPriority 和 ReactPriorityLevel

  // SchedulerPriority 转换成 ReactPrioritylevel
  export function getCurrentPriorityLevel(): ReactPriorityLevel {
    switch(Scheduler_getCurrentPriorityLevel()) {
      case Scheduler_ImmediatePriority:
        return ImmediatePriority;
      case Scheduler_UserBlockingPriority:
        return UserBlockingPriority;
      case Scheduler_NormalPriority:
        return NormalPriority;
      case Scheduler_LowPriority:
        return LowPriority;
      case Scheduler_IdlePriority:
        return IdlePriority;
      default:
        invariant(false, 'Unknown priority level.');
    }
  }
  
  // ReactPriorityLevel 转换成 SchedulerPriority
  function reactPriorityToSchedulerPriority(reactPrioritylevel) {
    switch(reactPriorityLevel) {
      case ImmediatePriority:
        return Scheduler_ImmediatePriority;
      case UserBlockingPriority:
        return Scheduler_UserBlockingPriority;
      case NormalPriority:
        return Scheduler_NormalPriority;
      case LowPriority:
        return Scheduler_LowPriority;
      case IdlePriority:
        return Scheduler_IdlePriority;
      default:
        invariant(false, 'Unknown priority level.');
    }
  }
  

• ReactFiberLane.js中，可以互转 LanePriority 和 ReactPriorityLevel

  export function schedulerPriorityToLanePriority(
    schedulerPriorityLevel: ReactPriorityLevel,
  ): LanePriority {
    switch(schedulerPriorityLevel) {
      case ImmediateSchedulerPriority:
        return SyncLanePriority;
      // ...省略部分代码
      default:
        return NoLanePriority;
    }
  }
  
  export function lanePriorityToSchedulerPriority(
    lanePriority: LanePriority,
  ): ReactPriorityLevel {
    switch (lanePriority) {
      case SyncLanePriority:
      case SyncBatchedLanePriority:
        return ImmediateSchedulerPriority;
        //...省略部分代码
      default:
        invariant(
          false,
          'Invalid update priority: %s. This is a bug in React.',
          lanePriority,
        );
    }
  }
  

优先级使用

• 通过 reconciler 运作流程中的归纳，reconciler 从输入到输出一共经历了4个阶段
• 在每个阶段中都会涉及到与优先级相关的处理，正是通过优先级的灵活运用
• React实现了可中断渲染，时间切片(timeslicing),异步渲染(suspense)等特性