关于javascript:Concurrent模式下React的更新行为-优先级模型

点击进入 React 源码调试仓库。

作为构建用户界面的 JavaScript 库，React 以晋升用户交互体验为外围，而实现这一指标较为重要的一点是优先响应用户交互触发的更新工作，其余不那么重要的工作要做出退让，咱们把用户交互触发的工作称为高优先级工作，不那么重要的工作称为低优先级工作。

React 的 Concurrent 模式下，不同优先级工作的存在会导致一种景象：高优先级的工作能够打断低优先级工作的执行 。然而打断归打断，总归是要复原低优先级工作的，于是， 低优先级工作在打断之后被复原 。另外，假使 低优先级工作始终被高优先级工作打断，那么低优先级工作就会过期，会被强制执行掉 。这就是咱们要探讨的两个问题： 高优先级工作插队 和饥饿问题。

React 对不同优先级工作的执行管制，它的目标只有一个，就是将最紧急的更新出现给用户。接下来我会两篇文章来探讨这两个问题。但在开始之前，
咱们须要先意识 React 工作优先级管制的根底：lane 模型以及它与 React 更新的关系。

留神，本文中提到的 React 中的工作优先级与调度机制中 Scheduler 的工作优先级不是同一个概念，后者可由前者转化而来。

在 React17 中，优先级模型换成了新的 lane 模型。该模型将优先级分成了 31 个，对应 31 个二进制位。

const TotalLanes = 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;

从优先级的名字以及对应的位来看，越靠右优先级越高。每个工作进来之后，其持有的优先级标记：lane 都会对应到某个位下来。

比方工作 1 持有的 lane 为：

0b0000000000000000000001000000000

工作 2 持有的 lane 为：~~~~

0b0000000000000000000000000001000

那么，工作 2 的优先级要高于工作 1。

咱们晓得，每当产生一个更新，都随之会产生一个 update 对象，而这个 update 对象会有一个 lane，示意这个更新它的优先级如何。这个 lane 是如何计算出来的呢？在绝对固定的优先级范畴中，优先指定级别较高的位，若该固定范畴内的 lanes 位全副被指定，则挪动到相邻的较低级别范畴的 lanes 位中指定。

举例来说：事件 1 触发了一个更新 A，它的优先级范畴是 InputDiscreteLanes，

0b0000000000000000000000000011000

那么更新 A 的 lane 在计算时会优先去被指定为倒数第四个位，如果被占用，则指定为倒数第五个位，如果还是被占用，那么会下移到相邻的低级别优先级范畴：InputContinuousLanes

0b0000000000000000000000011000000

在这个范畴内去指定，如果该范畴内也都被指定进来了，那么持续下移，反复这个过程，直到找到一个可用的位，指定给它，计算实现，放到 update 对象上，并且放到 root.pendingLanes 中，root.pendingLanes 示意 React 须要在本次解决的那些更新。

一旦产生更新工作，React 就会开始构建 workInProgress 树，在构建之前，会在 root.pendingLanes 中找到最紧急的 lanes 作为 renderLanes，构建 workInProgress 树的 workLoop 带着这个 renderLanes 一路向下走，当解决到产生更新的 fiber 节点上 update 链表时，会顺次判断 update.lane 是否在 renderLanes 中，若在，则进行解决，否则不解决。

export function processUpdateQueue<State>(
  workInProgress: Fiber,
  props: any,
  instance: any,
  renderLanes: Lanes,
): void {
  do {if (!isSubsetOfLanes(renderLanes, updateLane)) {// updateLane 在 renderLanes 中，解决这个更新} else {// 否则不解决，跳过}
  } while (true);
}

因为 lane 的计算是向下指定的，所以如果某个 lane 不在 renderLanes 的范畴，那肯定是优先级有余，须要被跳过。

在探讨 React 对于不同优先级的多任务共存的行为之前，咱们简略理解了 lane 模型和更新之间的关系。但 lane 模型波及大量的位运算，与优先级混同在一起难以了解，为此，我对 React 中计算 lane 的重要文件：ReactFiberLane 做了一些正文，能够为理解 lane 的工作机制提供一些帮忙。

前面的两篇文章将会别离探讨高优先级工作插队和饥饿问题。

欢送扫码关注公众号，发现更多技术文章

关于javascript:Concurrent模式下React的更新行为-优先级模型

lane 优先级模型

不同优先级级别的比拟

lane 的计算准则

如何判断是否应解决某个更新

小结