React18源码: React调度中的3种优先级类型和Lane的位运算

优先级类型

React内部对于优先级的管理，贯穿运作流程的4个阶段（从输入到输出），根据其功能的不同，可以分为3种类型：
- 1 ）fiber优先级(LanePriority)
  - 位于 react-reconciler包，也就是Lane(车道模型)
- 2 ）调度优先级(SchedulerPriority)
  - 位于scheduler包
- 3 ）优先级等级(ReactPriorityLevel)
  - 位于react-reconciler包中的 SchedulerWithReactIntegration.js
  - 负责上述2套优先级体系的转换.
Lane 是在 react@17.0.0的新特性.

Lane(车道模型)

英文单词lane翻译成中文表示"车道，航道"的意思，所以很多文章都将Lanes模型称为车道模型
Lane模型的源码在 ReactFiberLane.js,源码中大量使用了位运算

首先引入对Lane的解释, 这里简单概括如下：

1 ）Lane类型被定义为二进制变量，利用了位掩码的特性，在频繁运算的时候占用内存少，计算速度快.
- Lane和Lanes就是单数和复数的关系，代表单个任务的定义为Lane,代表多个任务的定义为Lanes

2 ）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

3 ）使用Lanes模型相比expirationTime模型的优势

Lanes把任务优先级从批量任务中分离出来
可以更方便的判断单个任务与批量任务的优先级是否重叠

// 判断：单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;

Lanes使用单个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

// 通过expirationTime实现
// 维护一个链表，按照单个task的优先级顺序进行插入
// 删除单个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 >= lowestPriorityInRang;
//2.通过Lanes实现
//1)删除单个task
batchOfTasks &= ~task;
//2）增加单个task
batchOfTasks |= task;
//3）比较task是否在group中
const isTaskIncludedInBatch = (task & batchOfTasks) !== 0;

Lanes是一个不透明的类型，只能在ReactFiberLane.js这个模块中维护
如果要在其他文件中使用，只能通过 ReactFiberLane.js 中提供的工具函数来使用
分析车道模型的源码(ReactFiberLane.js中)，可以得到如下结论：
- 1.可以使用的比特位一共有31位
- 2.共定义了18种车道(Lane/Lanes)变量，每一个变量占有1个或多个比特位，分别定义为Lane和Lanes类型.
- 3.每一种车道(Lane/Lanes)都有对应的优先级，所以源码中定义了18种优先级(LanePriority).
- 4.占有低位比特位的Lane变量对应的优先级越高
  - 最高优先级为 SynclanePriority 对应的车道为
    - Synclane = 0b0000000000000000000000000000001
  - 最低优先级为 OffscreenLanePriority 对应的车道为
    - OffscreenLane = 0b1000000000000000000000000000000

位运算

什么是位运算？程序中的所有数在计算机内存中都是以二进制的形式储存的。
位运算就是直接对整数在内存中的二进制位进行操作。
比如
- 0 在二进制中用 0 表示，我们用 0000 代表；
- 1 在二进制中用 1 表示，我们用 0001 代表；
那么先看两个位运算符号 & 和 |
- & 对于每一个比特位，两个操作数都为 1 时，结果为 1，否则为 0
- | 对于每一个比特位，两个操作数都为0时，结果为 0，否则为 1
- 我们看一下两个 1 & 0 和 1 | 0
- 如上 1 & 0 = 0, 1 | 0 = 1

参考

  0       0000
  1       0001
  -------------
  0 & 1 = 0000 = 0

再参考

0       0000
1       0001
----------------
0 | 1 = 0001 = 1

使用一张表格详细说明

运算符	用法	描述
与 &	a & b	如果两位都是1则设置每位为1
或 \|	a \| b	如果两位之一为1则设置每位为1
异或 ^	a^b	如果两位只有一位为1则设置每位为1
非 ~	~ a	反转操作数的比特位, 即0变成1, 1变成0
左移(<<)	a << b	将a的二进制形式向左移b(< 32)比特位, 右边用0填充
有符号右移(>>)	a>>b	将a的二进制形式向右移b(<32)比特位，丢弃被移除的位，左侧以最高位来填充
无符号右移(>>>)	a>>>b	将a的二进制形式向右移b(<32)比特位，丢弃被移除的位，并用0在左侧填充

位运算的一个使用场景

比如有一个场景下，会有很多状态常量A,B,C…,这些状态在整个应用中在一些关键节点中做流程控制
比如：
```
if(value === A) {
  // TODO..
}
```
如上判断value等于常量A,那么进入到if的条件语句中
此时是value属性是简单的一对一关系，但是实际场景下value可能是好几个枚举常量的集合
也就是一对多的关系，那么此时value可能同时代表A和B两个属性
如下图所示：

这时候，如果按照下面的代码来写，就会很麻烦
```
if(value === A || value === B) {
  // TODO..
}
```
此时的问题就是如何用一个value表示A和B两个属性的集合，这个时候位运算就派上用场了

因为可以把一些状态常量用32位的二进制来表示（这里也可以用其他进制），比如：

const A = 0b0000000000000000000000000000001 // 优先级最高
const B = 0b0000000000000000000000000000010
const C = 0b0000000000000000000000000000100 // 优先级最低

通过移位的方式让每一个常量都单独占一位，这样在判断一个属性是否包含常量的时候
可以根据当前位数的1和0来判断
这样如果一个值即代表A又代表B那么就可以通过位运算的 | 来处理
就有 AB = A | B = 0b0000000000000000000000000000011
那么如果把AB的值赋予给value,那么此时的value就可以用来代表A和B

此时当然不能直接通过等于或者恒等来判断value是否为A或者B,此时就可以通过&来判断。具体实现如下：

const A = 0b0000000000000000000000000000001
const B = 0b0000000000000000000000000000010
const C = 0b0000000000000000000000000000100
const N = 0b0000000000000000000000000000000
const value = A | B
console.log((value & A ) !== N) // true
console.log((value & B ) !== N) // true
console.log((value & C ) !== N ) // false

位运算在 react 中的应用

export const NoLanes = /*                */ 0b0000000000000000000000000000000;
const SyncLane = /*                      */ 0b0000000000000000000000000000001;

const InputContinuousHydrationLane = /*  */ 0b0000000000000000000000000000010;
const InputContinuousLane = /*           */ 0b0000000000000000000000000000100;

const DefaultHydrationLane = /*          */ 0b0000000000000000000000000001000;
const DefaultLane = /*                   */ 0b0000000000000000000000000010000;

const TransitionHydrationLane = /*       */ 0b0000000000000000000000000100000;
const TransitionLane = /*                */ 0b0000000000000000000000001000000;

如上 SyncLane 代表的数值是1，它却是最高的优先级
也即是说lane的代表的数值越小，此次更新的优先级就越大
在新版本的React中，还有一个新特性，就是render阶段可能被中断，在这个期间会产生一个更高优先级的任务
那么会再次更新lane属性，这样多个更新就会合并，这样一个lane可能需要表现出多个更新优先级

我们来看一下React是如何通过位运算分离出优先级的

function getHighestPriorityLane(lanes) {
  return lanes & -lanes;
}

如上就是通过 lanes & -lanes 分离出最高优先级的任务的，我们来看一下具体的流程
- 比如SyncLane和InputContinuousLane合并之后的任务优先级lane为
- SyncLane = 0b0000000000000000000000000000001
- InputContinuousLane = 0b0000000000000000000000000000100
- lane = SyncLane|InputContinuousLane
- lane = 0b0000000000000000000000000000101
- 那么通过 lanes & -lanes 分离出 SyncLane
- 首先我们看一下 -lanes,在二进制中需要用补码表示为：
- -lane = 0b1111111111111111111111111111011
- 那么接下来执行 lanes & -lanes 看一下，& 的逻辑是如果两位都是1则设置改位为1，否则为0
- 那么 lane & -lane, 只有一位（最后一位）全是1，所有合并后的内容为：
- lane & -lane = 0b0000000000000000000000000000001

可以看得出来lane&-lane的结果是SyncLane,所以通过lane&-lane就能分离出最高优先级的任务

const SyncLane = 0b0000000000000000000000000000001
const InputContinuousLane = 0b0000000000000000000000000000100
const lane = SyncLane | InputContinuousLane
console.log((lane & -lane) === SyncLane ) // true