【React】版本18 源码遨游(六) 车道 Lanes

【React】版本18 源码遨游(六) 车道 Lanes车道是React调度,协调过程中很重要的一个新概念。今天我们详细过一遍车道的源码。位置:react-reconciler\src\ReactFiberLane.new.js车道数量、定义车道是用位图定义的,它由一个31位的二进制数来保存、指示车道信息。在低位的 1 的权重大,在高位的 1 权重小。我们看一共定义了哪些车道:// 一共有31条车道export const TotalLanes = 31;// 表示没有车道,所有位都为0
摘要由CSDN通过智能技术生成

【React】版本18 源码遨游(六) 车道 Lanes

车道是React调度,协调过程中很重要的一个新概念。今天我们详细过一遍车道的源码。

位置:react-reconciler\src\ReactFiberLane.new.js

车道数量、定义

车道是用位图定义的,它由一个31位的二进制数来保存、指示车道信息。

在低位的 1 的权重大,在高位的 1 权重小。我们看一共定义了哪些车道:

// 一共有31条车道
export const TotalLanes = 31;

// 表示没有车道,所有位都为0
export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;

// 同步车道,优先度最高
export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;

// 连续输入注水车道 占两条
export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;

// 默认注水、默认车道
export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000010000;

// 事务注水车道
const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000000100000;
// 事务车道,一共有16条
const TransitionLanes: Lanes = /*                       */ 0b0000000001111111111111111000000;
const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000001000000;
const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000010000000;
const TransitionLane3: Lane = /*                        */ 0b0000000000000000000000100000000;
const TransitionLane4: Lane = /*                        */ 0b0000000000000000000001000000000;
const TransitionLane5: Lane = /*                        */ 0b0000000000000000000010000000000;
const TransitionLane6: Lane = /*                        */ 0b0000000000000000000100000000000;
const TransitionLane7: Lane = /*                        */ 0b0000000000000000001000000000000;
const TransitionLane8: Lane = /*                        */ 0b0000000000000000010000000000000;
const TransitionLane9: Lane = /*                        */ 0b0000000000000000100000000000000;
const TransitionLane10: Lane = /*                       */ 0b0000000000000001000000000000000;
const TransitionLane11: Lane = /*                       */ 0b0000000000000010000000000000000;
const TransitionLane12: Lane = /*                       */ 0b0000000000000100000000000000000;
const TransitionLane13: Lane = /*                       */ 0b0000000000001000000000000000000;
const TransitionLane14: Lane = /*                       */ 0b0000000000010000000000000000000;
const TransitionLane15: Lane = /*                       */ 0b0000000000100000000000000000000;
const TransitionLane16: Lane = /*                       */ 0b0000000001000000000000000000000;

// 重试车道,一共有5条
const RetryLanes: Lanes = /*                            */ 0b0000111110000000000000000000000;
const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
const RetryLane5: Lane = /*                             */ 0b0000100000000000000000000000000;

export const SomeRetryLane: Lane = RetryLane1;

// 选择性注水车道
export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000000000000000;

// 非空闲车道(前28条)
const NonIdleLanes = /*                                 */ 0b0001111111111111111111111111111;

// 空闲注水车道和空闲车道
export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
export const IdleLane: Lanes = /*                       */ 0b0100000000000000000000000000000;

// 屏外车道
export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;

// 上述一共31条车道

getLabelsForLanes(lanes**😗* Lanes)

性能分析用,根据当前传入的车道返回名字。

export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
   
  if (enableSchedulingProfiler) {
   
    // 返回的车道名字数组
    const labels = [];
    // 如果车道位上有值,则说明传入的车道其中有这条车道,将车道的名字推入数组。
    if (lanes & SyncLane) {
   
      labels.push('Sync');
    }
    // 重复判断所有车道
    if (lanes & InputContinuousHydrationLane) {
   
      labels.push('InputContinuousHydration');
    }
    if (lanes & InputContinuousLane) {
   
      labels.push('InputContinuous');
    }
    if (lanes & DefaultHydrationLane) {
   
      labels.push('DefaultHydration');
    }
    if (lanes & DefaultLane) {
   
      labels.push('Default');
    }
    if (lanes & TransitionHydrationLane) {
   
      labels.push('TransitionHydration');
    }
    if (lanes & TransitionLanes) {
   
      labels.push('Transition(s)');
    }
    if (lanes & RetryLanes) {
   
      labels.push('Retry(s)');
    }
    if (lanes & SelectiveHydrationLane) {
   
      labels.push('SelectiveHydration');
    }
    if (lanes & IdleHydrationLane) {
   
      labels.push('IdleHydration');
    }
    if (lanes & IdleLane) {
   
      labels.push('Idle');
    }
    if (lanes & OffscreenLane) {
   
      labels.push('Offscreen');
    }
    // 返回车道名数组
    return labels;
  }
}

getHighestPriorityLane(lanes**😗* Lanes)

从当前传入的车道中选则最高优先度的车道(最低位1)

export function getHighestPriorityLane(lanes: Lanes): Lane {
   
  	
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值