【React】版本18 源码遨游（六） 车道 Lanes

【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 {