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)等特性