看完吊打面试官系列之React优先级

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优先级管理

1. 「2套优先级体系」和 「1套转换体系」
2. 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的优先级是否重叠