React 源码优先级管理全解析：Lane 车道模型与 LanePriority / SchedulerPriority / ReactPriorityLevel 三套体系

教程前端【免费下载链接】react-illustration-series图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.项目地址https://gitcode.com/gh_mirrors/re/react-illustration-series点击查看免费下载本文基于react17.0.2源码梳理 React 内部的优先级管理体系。React 运行时从输入到输出共经历 4 个阶段贯穿其中的正是优先级fiber构造侧使用LanePriority车道模型调度中心使用SchedulerPriority二者通过ReactPriorityLevel完成换算。读完本文你将理解可中断渲染、时间切片(time slicing)、异步渲染(suspense)三大特性在源码层面的共同基石——优先级并掌握 31 位二进制变量如何用位掩码高效表达任务优先级。引言为什么 React 需要一套优先级体系React 是一个声明式、高效且灵活的 JavaScript 库React 团队一直致力于实现高效渲染其中有 2 个十分有名的演讲2017 年 Lin Clark 的演讲中介绍了fiber架构和可中断渲染。2018 年 Dan 在 JSConf 冰岛的演讲进一步介绍了时间切片(time slicing)和异步渲染(suspense)等特性。演讲中所展示的可中断渲染、时间切片(time slicing)、异步渲染(suspense)等特性在源码中得以实现都依赖于优先级管理。在React17.0.2源码中一共有2 套优先级体系和1 套转换体系。在深入分析之前先回顾一下 reconciler 运作流程React内部对于优先级的管理贯穿运作流程的 4 个阶段从输入到输出根据其功能的不同可以分为 3 种类型fiber优先级(LanePriority)位于react-reconciler包也就是Lane(车道模型)。调度优先级(SchedulerPriority)位于scheduler包。优先级等级(ReactPriorityLevel)位于react-reconciler包中的SchedulerWithReactIntegration.js负责上述 2 套优先级体系的转换。预备知识Lane车道模型在深入分析 3 种优先级之前需要先了解Lane这是react17.0.0的新特性。英文单词lane翻译成中文表示车道航道的意思所以很多文章都将Lanes模型称为车道模型。Lane模型的源码在ReactFiberLane.jspackages/react-reconciler/src/ReactFiberLane.js源码中大量使用了位运算。有关位运算的讲解可以参考 React 算法之位运算。Lane 模型的设计意图Lane类型被定义为二进制变量利用了位掩码的特性在频繁运算的时候占用内存少计算速度快Lane和Lanes是单数和复数的关系代表单个任务的定义为Lane代表多个任务的定义为Lanes。Lane是对expirationTime的重构以前使用expirationTime表示的字段都改为了lanerenderExpirationtime - renderLanes update.expirationTime - update.lane fiber.expirationTime - fiber.lanes fiber.childExpirationTime - fiber.childLanes root.firstPendingTime and root.lastPendingTime - fiber.pendingLanesLanes 相比 expirationTime 的优势优势一把任务优先级从批量任务中分离出来更方便地判断单个任务与批量任务的优先级是否重叠。// 判断: 单task与batchTask的优先级是否重叠 // 1. 通过expirationTime判断 const isTaskIncludedInBatch priorityOfTask priorityOfBatch; // 2. 通过Lanes判断 const isTaskIncludedInBatch (task batchOfTasks) ! 0; // 当同时处理一组任务, 该组内有多个任务, 且每个任务的优先级不一致 // 1. 如果通过expirationTime判断. 需要维护一个范围(在Lane重构之前, 源码中就是这样比较的) const isTaskIncludedInBatch taskPriority highestPriorityInRange taskPriority lowestPriorityInRange; // 2. 通过Lanes判断 const isTaskIncludedInBatch (task batchOfTasks) ! 0;优势二使用单个 32 位二进制变量即可代表多个不同的任务即一个变量代表一个组(group)在 group 中分离出单个 task 非常容易。在expirationTime模型设计之初react 体系中还没有Suspense异步渲染的概念。考虑如下场景有 3 个任务其优先级A B C正常来讲只需要按照优先级顺序执行就可以了。但现在情况变了A 和 C 任务是CPU密集型而 B 是IO密集型Suspense 会调用远程 api算是 IO 任务即A(cpu) B(IO) C(cpu)。此时的需求需要将任务B从 group 中分离出来先处理 cpu 任务A和C。// 从group中删除或增加task // 1. 通过expirationTime实现 // 0) 维护一个链表, 按照单个task的优先级顺序进行插入 // 1) 删除单个task(从链表中删除一个元素) task.prev.next task.next; // 2) 增加单个task(需要对比当前task的优先级, 插入到链表正确的位置上) let current queue; while (task.expirationTime current.expirationTime) { current current.next; } task.next current.next; current.next task; // 3) 比较task是否在group中 const isTaskIncludedInBatch taskPriority highestPriorityInRange taskPriority lowestPriorityInRange; // 2. 通过Lanes实现 // 1) 删除单个task batchOfTasks ~task; // 2) 增加单个task batchOfTasks | task; // 3) 比较task是否在group中 const isTaskIncludedInBatch (task batchOfTasks) ! 0;通过上述伪代码可以看到Lanes的优越性运用起来代码量少简洁高效。Lanes是一个不透明的类型只能在ReactFiberLane.js这个模块中维护。如果要在其他文件中使用只能通过ReactFiberLane.js中提供的工具函数来使用。车道模型的源码结论分析ReactFiberLane.js的源码可以得到如下结论可以使用的比特位一共有 31 位为什么可以参考 React 算法之位运算 中的说明JS 位运算会转换为Int32最多 32 位最高位是符号位所以除去符号位最多只有 31 位可参与运算。共定义了 18 种车道Lane/Lanes变量每一个变量占有 1 个或多个比特位分别定义为Lane和Lanes类型。每一种车道Lane/Lanes都有对应的优先级所以源码中定义了 18 种优先级LanePriority。占有低位比特位的Lane变量对应的优先级越高最高优先级为SyncLanePriority对应的车道为SyncLane 0b0000000000000000000000000000001。最低优先级为OffscreenLanePriority对应的车道为OffscreenLane 0b1000000000000000000000000000000。优先级区别和联系在源码中3 种优先级位于不同的 js 文件是相互独立的。注意LanePriority和SchedulerPriority从命名上看它们代表的是优先级。ReactPriorityLevel从命名上看它代表的是等级而不是优先级它用于衡量LanePriority和SchedulerPriority的等级。LanePriorityLanePriority属于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树构造时的具体使用在fiber 树构造章节详细解读可参考 fiber 树构造(基础准备) 中的优先级小节。SchedulerPrioritySchedulerPriority属于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。在 React 调度原理(scheduler) 中unstable_scheduleCallback正是根据传入的SchedulerPriority级别计算任务的过期时间expirationTime startTime timeout不同优先级对应不同的timeout从而控制任务队列小顶堆的排序。ReactPriorityLevelReactPriorityLevel属于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和ReactPriorityLevelexport 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, ); } }由此可以得到完整的三套体系转换链路SchedulerPriority --转换-- ReactPriorityLevel --转换-- LanePriority scheduler 包 转换桥梁 react-reconciler 包转换关系的实际调用场景结合 reconciler 运作流程 的源码ensureRootIsScheduled函数在注册调度任务时会实际使用上述转换// ... 省略部分无关代码 function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { const newCallbackPriority returnNextLanesPriority(); // ... // 后半部分: 注册调度任务 let newCallbackNode; if (newCallbackPriority SyncLanePriority) { newCallbackNode scheduleSyncCallback( performSyncWorkOnRoot.bind(null, root), ); } else if (newCallbackPriority SyncBatchedLanePriority) { newCallbackNode scheduleCallback( ImmediateSchedulerPriority, performSyncWorkOnRoot.bind(null, root), ); } else { // 关键转换: 把 LanePriority 转换为 SchedulerPriority, 交给调度中心 const schedulerPriorityLevel lanePriorityToSchedulerPriority(newCallbackPriority); newCallbackNode scheduleCallback( schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root), ); } root.callbackPriority newCallbackPriority; root.callbackNode newCallbackNode; }这里的逻辑印证了react-reconciler内部以LanePriority决策判断SyncLanePriority/SyncBatchedLanePriority一旦需要交给scheduler包调度就通过lanePriorityToSchedulerPriority换算为SchedulerPriority。反向的schedulerPriorityToLanePriority则用于requestUpdateLane等输入阶段把当前调度优先级转换为 update 的 lane。优先级使用贯穿 reconciler 4 个阶段通过 reconciler 运作流程 中的归纳reconciler从输入到输出一共经历了 4 个阶段在每个阶段中都会涉及到与优先级相关的处理。正是通过优先级的灵活运用React实现了可中断渲染、时间切片(time slicing)、异步渲染(suspense)等特性。第 1 阶段输入创建 update.lane无论是应用初始化还是组件内setState最终都会走到scheduleUpdateOnFiber输入链路。在此之前需要先通过requestUpdateLane生成一个lane作为本次更新的优先级并挂载到update.lane上参见 fiber 树构造(基础准备) 中的update 优先级小节export function requestUpdateLane(fiber: Fiber): Lane { // Special cases const mode fiber.mode; if ((mode BlockingMode) NoMode) { // legacy 模式: 固定返回 SyncLane return (SyncLane: Lane); } else if ((mode ConcurrentMode) NoMode) { // blocking模式: 根据当前调度优先级返回 SyncLane 或 SyncBatchedLane return getCurrentPriorityLevel() ImmediateSchedulerPriority ? (SyncLane: Lane) : (SyncBatchedLane: Lane); } // concurrent模式: 根据调度优先级换算为车道模型 const schedulerPriority getCurrentPriorityLevel(); let lane; if ( (executionContext DiscreteEventContext) ! NoContext schedulerPriority UserBlockingSchedulerPriority ) { // executionContext 存在输入事件. 且调度优先级是用户阻塞性质 lane findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes); } else { // 调度优先级转换为车道模型 const schedulerLanePriority schedulerPriorityToLanePriority(schedulerPriority); lane findUpdateLane(schedulerLanePriority, currentEventWipLanes); } return lane; }注意requestUpdateLane正是前文schedulerPriorityToLanePriority转换函数的消费方concurrent 模式下先读取当前的SchedulerPriority再转换为LanePriority最后findUpdateLane在对应优先级的通道组中挑选空闲车道。而updateContainer、enqueueSetState中都是先requestUpdateLane(fiber)拿到 lane再createUpdate(eventTime, lane)创建 update 对象最后scheduleUpdateOnFiber(fiber, lane, eventTime)进入调度。第 2 阶段注册调度任务LanePriority 决定任务注册方式scheduleUpdateOnFiber之后进入ensureRootIsScheduled前半部分通过getNextLanes从fiberRoot的pendingLanes、expiredLanes、suspendedLanes、pingedLanes等属性中确定本次渲染使用的lanes与returnNextLanesPriority()。getNextLanes的核心逻辑可参见 fiber 树构造(基础准备)export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes { // 1. check是否有等待中的lanes const pendingLanes root.pendingLanes; if (pendingLanes NoLanes) { return_highestLanePriority NoLanePriority; return NoLanes; } let nextLanes NoLanes; let nextLanePriority NoLanePriority; const expiredLanes root.expiredLanes; const suspendedLanes root.suspendedLanes; const pingedLanes root.pingedLanes; // 2. check是否有已过期的lanes if (expiredLanes ! NoLanes) { nextLanes expiredLanes; nextLanePriority return_highestLanePriority SyncLanePriority; } else { // 非Idle任务 / Idle任务 ... } // ... return nextLanes; }拿到newCallbackPriority属于LanePriority之后ensureRootIsScheduled依据它选择注册方式SyncLanePriorityscheduleSyncCallback(performSyncWorkOnRoot.bind(null, root))走同步回调队列。SyncBatchedLanePriorityscheduleCallback(ImmediateSchedulerPriority, ...)以调度中心的立即优先级注册。其余优先级lanePriorityToSchedulerPriority(newCallbackPriority)换算后scheduleCallback(schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root))。同时ensureRootIsScheduled中还存在基于优先级的节流防抖优化详见 React 调度原理(scheduler)节流existingCallbackPriority newCallbackPriority新旧更新优先级相同如连续多次setState无需注册新task直接退出。防抖existingCallbackPriority ! newCallbackPriority取消旧task重新注册新task。第 3 阶段执行任务回调renderLanes 与 fiber.lanes 的位运算判断调度中心执行任务回调performSyncWorkOnRoot或performConcurrentWorkOnRoot时会先通过getNextLanes得到本次渲染的renderLanes作为全局渲染优先级。在 fiber 树构造的beginWork中用位运算判断某个 fiber 节点是否需要更新参见 fiber 树构造(基础准备)function beginWork( current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes, ): Fiber | null { const updateLanes workInProgress.lanes; if (current ! null) { // ... } else if (!includesSomeLane(renderLanes, updateLanes)) { didReceiveUpdate false; // 本fiber节点的没有更新, 可以复用, 进入bailout逻辑 return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes); } } // 不能复用, 创建新的fiber节点 workInProgress.lanes NoLanes; // 重置优先级为 NoLanes // ... }其中的includesSomeLane(renderLanes, updateLanes)就是典型的位掩码运算判断本次渲染优先级是否覆盖该节点优先级。只要fiber.lanes或update.lane的优先级比renderLanes低不在本次渲染的车道集合内该节点就会被复用bailout从而保证低优先级任务不会阻塞高优先级渲染。此外ReactFiberLane.js中还提供了两个工具函数用于在Lanes集合中分离出最高/最低优先级的单条车道详见 React 算法之位运算// 分离出最高优先级的lane: 提取最右边的1 function getHighestPriorityLane(lanes: Lanes) { return lanes -lanes; } // 分离出最低优先级的lane: 提取最左边的1 function getLowestPriorityLane(lanes: Lanes): Lane { // This finds the most significant non-zero bit. const index 31 - clz32(lanes); return index 0 ? NoLanes : 1 index; }第 4 阶段输出commit 阶段的渲染优先级传递在commitRootImpl中root.finishedLanes保存本次完成的渲染优先级并作为renderPriorityLevel传入commitMutationEffects等提交函数确保副作用处理与本次渲染的车道一致。提交完成后还会再次调用ensureRootIsScheduled(root, now())基于最新的pendingLanes判断是否还有更高/更低的更新需要发起新调度。总结本文介绍了 react 源码中有关优先级的部分并梳理了 3 种优先级之间的区别和联系LanePriorityreact-reconciler/ReactFiberLane.js车道模型与 fiber 树构造、update 队列、渲染优先级直接相关共 18 种数值越大优先级越高SyncLanePriority 15最高NoLanePriority 0最低。SchedulerPriorityscheduler包 /SchedulerPriorities.js调度中心使用共 6 级ImmediatePriority 1最高IdlePriority 5最低决定任务队列小顶堆的排序。ReactPriorityLevelreact-reconciler/SchedulerWithReactIntegration.js转换桥梁用等级99/98/97/96/95/90衡量两套优先级体系的对应关系。它们贯穿了 reconciler 运作流程 中的 4 个阶段在 react 源码中所占用的代码量比较高。理解它们的设计思路为接下来分析调度原理React 调度原理(scheduler)和fiber构造fiber 树构造(基础准备)打下基础。三套体系配合 31 位二进制位掩码让 React 可以在一个变量中同时表达多个任务、任意增删单任务、快速判断任务集合的重叠关系这正是可中断渲染、时间切片、Suspense等高级特性能够在react17.0.2源码层面落地的根本原因。赞分享教程前端【免费下载链接】react-illustration-series图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.项目地址https://gitcode.com/gh_mirrors/re/react-illustration-series点击查看免费下载相关推荐React Lane模型完全解析just-react优先级调度核心在React的Concurrent Mode中 Lane模型 是实现多优先级调度的关键机制。这个基于31位二进制位的精巧设计让React能够高效处理用户交互文档前端从源码到编译ParadoxiaRAT的MSVC与MINGW双环境搭建完整指南从源码到编译ParadoxiaRAT的MSVC与MINGW双环境搭建完整指南 ParadoxiaRAT是一款功能强大的Windows远程访问工具支持MSVC网络安全Gemma-4-12B-it-qat-OptiQ-4bit安全部署本地AI模型的安全最佳实践 Gemma 4 12B it qat OptiQ 4bit安全部署本地AI模型的安全最佳实践 在当今人工智能快速发展的时代 本地AI模型部署 的安全性上一篇如何使用Extract Text Webpack Plugin轻松分离CSS与JS文件下一篇Apache Doris 压缩算法怎么选三步落地存储省 40%创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考