lane 模型

2023-04-10 18:30:29

react 需要一套优先级的机制，需要满足：

• 可以表示优先级的不同
• 可以同时存在几个同优先级的更新，所以要有批处理的概念
• 方便进行优先级相关计算

优先级

在 scheduler 中，对 lane 模型的设计采用了 31 位的二进制来表示，位数越小表示优先级越高

packages/react-reconciler/src/ReactFiberLane.js

export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000
export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000

export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001
export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010

export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100
const InputDiscreteLanes: Lanes = /*                    */ 0b0000000000000000000000000011000

const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000
const InputContinuousLanes: Lanes = /*                  */ 0b0000000000000000000000011000000

export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000
export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000111000000000

const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000
const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000

const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000

export const SomeRetryLane: Lanes = /*                  */ 0b0000010000000000000000000000000

export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000

const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111

export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000
const IdleLanes: Lanes = /*                             */ 0b0110000000000000000000000000000

export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000

其中，同步优先级 SyncLane 为第一位，从 SyncLane 往下一直到 SelectiveHydrationLane，优先级逐步降低

批处理

可以在上面的代码中看到有一些优先级占用了很多位，比如第8、11、14、17行等

这就是批处理的概念，被称作lanes

可以发现越低优先级的lanes占的位越多，这是因为越低优先级的更新越容易被打断，所以导致积压下来的更新越多，就需要更多的位。

方便进行优先级相关计算

lane的变量对应的二进制的位，那么优先级的相关计算就是位运算