React源码解析之Lane优先级
经历一个月的学习整理,站在前人的肩膀上,对React有了一些浅薄的理解,希望记录自己的学习过程的同时也可以给大家带来一点小帮助。如果此系列文章对您有些帮助,还望在座各位义夫义母不吝点赞关注支持🐶,也希望各位大佬拍砖探讨
本篇属于React中的优先级管理
-
[X] React启动过程 -
[X] React的两大工作循环 -
[X] React中的对象 -
[ ] React fiber的初次创建与更新 -
[ ] React fiber的渲染 -
[X] React的管理员(reconciler运行循环) -
[X] react的优先级管理(Lane模型)
「React Hook原理」
-
[ ] 状态与副作用 -
[ ] Hook原理 -
[ ] 状态Hook -
[ ] 副作用Hook
「其他」
-
[ ] React的合成事件 -
[ ] Context原理 -
[ ] diff算法
React优先级管理
-
「2套优先级体系」和 「1套转换体系」 -
React内部对于优先级的管理, 贯穿运作流程的 4 个阶段(从输入到输出), 根据其功能的不同, 可以分为 3 种类型:
-
fiber优先级( LanePriority
): 位于react-reconciler包, 也就是Lane(车道模型). -
调度优先级( SchedulerPriority
): 位于scheduler包. -
优先级等级( ReactPriorityLevel
) : 位于react-reconciler包中的SchedulerWithReactIntegration.js, 负责上述 2 套优先级体系的转换.
Lane(车道模型)
-
Lane类型被定义为二进制变量, 利用了位掩码的特性, 在频繁运算的时候占用内存少, 计算速度快. -
「Lane」和 「Lanes」就是单数和复数的关系, 代表单个任务的定义为 Lane
, 代表多个任务的定义为Lanes
-
-
Lane是对于expirationTime的重构, 以前使用expirationTime表示的字段, 都改为了lane
renderExpirationtime -> renderLanes
update.expirationTime -> update.lane
fiber.expirationTime -> fiber.lanes
fiber.childExpirationTime -> fiber.childLanes
root.firstPendingTime and root.lastPendingTime -> fiber.pendingLanes
-
使用Lanes模型相比expirationTime模型的优势: -
Lanes把任务优先级从批量任务中分离出来, 可以更方便的判断单个任务与批量任务的优先级是否重叠.
-
// 判断: 单task与batchTask的优先级是否重叠