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,
      );
  }
}