芷江建设工程招投标网站,网上推广产品哪个网好,网站站长需要具备什么素质,我想在阿里巴巴上给别人做网站优先级区别和联系
在源码中#xff0c;3种优先级位于不同的js文件#xff0c;是相互独立的注意#xff1a; LanePriority 和 SchedulerPriority 从命名上看#xff0c;它们代表的是优先级ReactPriorityLevel 从命名上看#xff0c;它代表的是等级而不是优先级 它用于衡量…优先级区别和联系
在源码中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)等特性
