03.ReactFiberLane与ReactEventPriority.md

react-reconciler/src/ReactEventPriorities.js

import {
  NoLane, SyncLane, InputContinuousLane, DefaultLane, IdleLane,
  getHighestPriorityLane, includesNonIdleWork
} from './ReactFiberLane';

/** 离散事件优先级，与SyncLane相关联 */
export const DiscreteEventPriority = SyncLane;
/** 连续事件优先级，与InputContinuousLane相关联 */
export const ContinuousEventPriority = InputContinuousLane;
/** 默认事件优先级，与DefaultLane相关联 */
export const DefaultEventPriority = DefaultLane;
/** 空闲事件优先级，与IdleLane相关联 */
export const IdleEventPriority = IdleLane;

/** 当前更新优先级值 */
let currentUpdatePriority = NoLane;

/**
 * 获取当前更新优先级。
 * @returns {number} 当前更新优先级。
 */
export function getCurrentUpdatePriority() {
  return currentUpdatePriority;
}

/**
 * 设置当前更新优先级。
 * @param {number} newPriority - 要设置的新优先级。
 */
export function setCurrentUpdatePriority(newPriority) {
  currentUpdatePriority = newPriority;
}

/**
 * 判断事件优先级是否高于（数值更小）车道。
 * @param {number} eventPriority - 要比较的事件优先级。
 * @param {number} lane - 要与之比较的车道值。
 * @returns {boolean} 如果事件优先级更高则返回真；否则返回假。
 */
export function isHigherEventPriority(eventPriority, lane) {
  return (eventPriority !== 0) && eventPriority < lane;
}

/**
 * 将车道转换为事件优先级。
 * @param {number} lanes - 车道值。
 * @returns {number} 与车道相对应的事件优先级。
 */
export function lanesToEventPriority(lanes) {
  let lane = getHighestPriorityLane(lanes);
  if (!isHigherEventPriority(DiscreteEventPriority, lane)) {
    return DiscreteEventPriority;
  }
  if (!isHigherEventPriority(ContinuousEventPriority, lane)) {
    return ContinuousEventPriority;
  }
  if (includesNonIdleWork(lane)) {
    return DefaultEventPriority;
  }
  return IdleEventPriority;
}

react-reconciler/src/ReactFiberLane.js

import { allowConcurrentByDefault } from 'shared/ReactFeatureFlags';

/** 总车道数量 */
export const TotalLanes = 31;
/** 无车道 */
export const NoLanes = 0b0000000000000000000000000000000;
/** 无车道 */
export const NoLane = 0b0000000000000000000000000000000;
/** 同步车道 */
export const SyncLane = 0b0000000000000000000000000000001;
/** 输入连续水合车道 */
export const InputContinuousHydrationLane = 0b0000000000000000000000000000010;
/** 输入连续车道 */
export const InputContinuousLane = 0b0000000000000000000000000000100;
/** 默认水合车道 */
export const DefaultHydrationLane = 0b0000000000000000000000000001000;
/** 默认车道 */
export const DefaultLane = 0b0000000000000000000000000010000;
/** 选择性水合车道 */
export const SelectiveHydrationLane = 0b0001000000000000000000000000000;
/** 空闲水合车道 */
export const IdleHydrationLane = 0b0010000000000000000000000000000;
/** 空闲车道 */
export const IdleLane = 0b0100000000000000000000000000000;
/** 屏幕外车道 */
export const OffscreenLane = 0b1000000000000000000000000000000;
/** 非空闲车道 */
const NonIdleLanes = 0b0001111111111111111111111111111;

/**
 * 标记根节点更新
 * @param {object} root - 根节点
 * @param {number} updateLane - 更新的车道
 */
export function markRootUpdated(root, updateLane) {
  root.pendingLanes |= updateLane;
}

/**
 * 获取下一个车道
 * @param {object} root - 根节点
 * @returns {number} 下一个车道
 */
export function getNextLanes(root) {
  const pendingLanes = root.pendingLanes;
  if (pendingLanes == NoLanes) {
    return NoLanes;
  }
  const nextLanes = getHighestPriorityLanes(pendingLanes);
  return nextLanes;
}

/**
 * 获取最高优先级的车道
 * @param {number} lanes - 车道
 * @returns {number} 最高优先级的车道
 */
export function getHighestPriorityLanes(lanes) {
  return getHighestPriorityLane(lanes);
}

/**
 * 获取最高优先级的车道
 * @param {number} lanes - 车道
 * @returns {number} 最高优先级的车道
 */
export function getHighestPriorityLane(lanes) {
  return lanes & -lanes;
}

/**
 * 包括非空闲工作
 * @param {number} lanes - 车道
 * @returns {boolean} 如果包括非空闲工作则返回真
 */
export function includesNonIdleWork(lanes) {
  return (lanes & NonIdleLanes) !== NoLanes;
}

/**
 * 是否为车道的子集
 * @param {number} set - 集合
 * @param {number} subset - 子集
 * @returns {boolean} 如果是子集则返回真
 */
export function isSubsetOfLanes(set, subset) {
  return (set & subset) === subset;
}

/**
 * 合并车道
 * @param {number} a - 车道a
 * @param {number} b - 车道b
 * @returns {number} 合并后的车道
 */
export function mergeLanes(a, b) {
  return a | b;
}

/**
 * 包括阻塞车道
 * @param {object} root - 根节点
 * @param {number} lanes - 车道
 * @returns {boolean} 如果包括阻塞车道则返回假
 */
export function includesBlockingLane(root, lanes) {
  if (allowConcurrentByDefault) {
    return false;
  }
  const SyncDefaultLanes = InputContinuousLane | DefaultLane;
  return (lanes & SyncDefaultLanes) !== NoLane;
}

shared/ReactFeatureFlags.js

export const allowConcurrentByDefault = true;