当前位置：首页 > news >正文

前端宝典之六：React源码解析之lane模型

news 来源：原创 2024/9/20 6:58:30

本文主要内容：
介绍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;
}