本文主要内容:
介绍lane模型
一、 lane模型
lane模型就是react优先级的机制,可以用来
- 可以表示优先级的不同
- 可能同时存在几个同优先级的更新,所以还得能表示批的概念
- 方便进行优先级相关计算
1、表示优先级不同
lane模型使用31位的二进制表示31条赛道,位数越小的优先级越高
,某些相邻的位拥有相同优先级。
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;
同步优先级占用的位数为第一位
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001;
2、 表示“批”的概念
const InputDiscreteLanes: Lanes = /* / 0b0000000000000000000000000011000;
export const DefaultLanes: Lanes = / / 0b0000000000000000000111000000000;
const TransitionLanes: Lanes = / */ 0b0000000001111111110000000000000;
其中的某些变量占了多个位,这就是批
其中InputDiscreteLanes
是“用户交互”触发更新会拥有的优先级范围。
DefaultLanes
是“请求数据返回后触发更新”拥有的优先级范围。
TransitionLanes
是Suspense、useTransition、useDeferredValue拥有的优先级范围。
这其中有个细节,越低优先级的lanes占用的位越多
。比如InputDiscreteLanes占了2个位,TransitionLanes占了9个位。
原因在于:越低优先级的更新越容易被打断,导致积压下来,所以需要更多的位。相反,最高优的同步更新的SyncLane不需要多余的lanes
3、 方便进行优先级相关计算
使用位运算符
// 判断a b是否有交集
export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane) {return (a & b) !== NoLanes;
}// 计算b这个lanes是否是a对应的lanes的子集,只需要判断a与b按位与的结果是否为b:
export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane) {return (set & subset) === subset;
}// 将两个lane或lanes的位合并只需要执行按位或操作:
export function mergeLanes(a: Lanes | Lane, b: Lanes | Lane): Lanes {return a | b;
}