React 里的各种优先级与转换

[imfenghuang]

1. Schedule 的优先级：（优先级由高到低）

• ImmediatePriority
• UserBlockingPriority
• NormalPriority
• LowPriority
• IdlePriority

2. React 的优先级：（EventPriority）

• DiscreteEventPriority 离散事件优先级，如 click、input 等事件触发
• ContinuousEventPriority 连续事件优先级，如 drag、mousemove 等事件触发
• DefaultEventPriority 默认优先级，如通过定时器周期性触发
• IdleEventPriority 空闲情况优先级

3. React 到 Schedule 的转换

3.1 第一步，把 lanes 转换为 EventPriority

function lanesToEventPriority(lanes: Lanes): EventPriority {
  // 获取 lanes 中优先级最高的 lane
  // lanes & -lanes
  const lane = getHighestPriorityLane(lanes);

  // 如果 lane 优先级高于 DiscreteEventPriority 返回 DiscreteEventPriority
  if (!isHigherEventPriority(DiscreteEventPriority, lane)) {
    return DiscreteEventPriority;
  }
  
  // 如果 lane 优先级高于 ContinuousEventPriority 返回 ContinuousEventPriority
  if (!isHigherEventPriority(ContinuousEventPriority, lane)) {
    return ContinuousEventPriority;
  }

  // 是否是 NonIdleLanes 的 lane
  if (includesNonIdleWork(lane)) {
    return DefaultEventPriority;
  }

  // 默认返回
  return IdleEventPriority;
}

// 获取 lanes 中优先级最高的 lane。
function getHighestPriorityLane(lanes: Lanes): Lane {
  return lanes & -lanes;
}

function isHigherEventPriority(
  a: EventPriority,
  b: EventPriority,
): boolean {
  return a !== 0 && a < b;
}

function includesNonIdleWork(lanes: Lanes) {
  return (lanes & NonIdleLanes) !== NoLanes;
}

3.2 第二步，把 EventPriority 转换为 Schedule 优先级

let schedulerPriorityLevel;

// 事件优先级转调度优先级
switch (lanesToEventPriority(nextLanes)) {
  // DiscreteEventPriority 转化为 ImmediateSchedulerPriority
  case DiscreteEventPriority:
    schedulerPriorityLevel = ImmediateSchedulerPriority;
    break;

  // ContinuousEventPriority 转化为 UserBlockingSchedulerPriority
  case ContinuousEventPriority:
    schedulerPriorityLevel = UserBlockingSchedulerPriority;
    break;

  // DefaultEventPriority 转化为 NormalSchedulerPriority
  case DefaultEventPriority:
    schedulerPriorityLevel = NormalSchedulerPriority;
    break;

  // IdleEventPriority 转化为 IdleSchedulerPriority
  case IdleEventPriority:
    schedulerPriorityLevel = IdleSchedulerPriority;
    break;
    
  // 其他 转化为 NormalSchedulerPriority    
  default:
    schedulerPriorityLevel = NormalSchedulerPriority;
    break;
}

4. Schedule 到 React 的转换

const schedulerPriority = getCurrentSchedulerPriorityLevel();

switch (schedulerPriority) {
  // ImmediateSchedulerPriority 转化为 DiscreteEventPriority
  case ImmediateSchedulerPriority:
    return DiscreteEventPriority;

  // UserBlockingSchedulerPriority 转化为 ContinuousEventPriority
  case UserBlockingSchedulerPriority:
    return ContinuousEventPriority;

  // NormalSchedulerPriority / LowSchedulerPriority 转化为 DefaultEventPriority
  case NormalSchedulerPriority:
  case LowSchedulerPriority:
    return DefaultEventPriority;

  // IdleSchedulerPriority 转化为 IdleEventPriority
  case IdleSchedulerPriority:
    return IdleEventPriority;

  // 其他 转化为 DefaultEventPriority
  default:
    return DefaultEventPriority;
}