React18源码: React中的LanePriority和SchedulerPriority

本文主要是介绍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,);}
}