React scheduler模块part3 - React中的优先级以及调度
大家好，我是三重堂堂主（公众号：咪仔和汤圆，欢迎关注~）
上一篇这里主要讲了scheduler包的源码，
接下来我们需要在前面两篇文章的基础上，进行一个较为整体的探索。React中关于scheduler的部分，除开上两篇文章说的，还有React的优先级机制，以及将优先级怎么结合到scheduler模块。
React中的优先级种类
在目前的源码中，存在有三套优先级：
- 第一套优先级是
React Event的优先级； - 第二套优先级是
Lane模型的优先级，主要应用于React内部； - 第三套优先级就是
scheduler包里面的优先级。
Lane模型
Lane意思就是车道，我们类比于F1赛车一样的车道，有内圈外圈之分。Lane优先级指的是像赛车车道一样来表示优先级，即最里面的优先级最高，按位依次降低。当然优先级比较高的更新是少数，更多的是可以等待的更新，因此高优先级数量肯定比低优先级数量的少。React中使用二进制来表示优先级，这个二进制只有1位为1，其余全为0，这个1就表示优先级的所在，位越小（越靠右）表示优先级越高。优先级的运算（合并优先级、拆分优先级等）采用位运算的方式。多个Lane就组合成了Lanes，Lanes表示一批任务的优先级。
下面为Lane模型中优先级的定义：
// Lane模型优先级 ReactFiberLane.old.js
// 总共11位
export const TotalLanes = 31;
// 没有优先级
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;
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;
// 表示更新失败重试的优先级
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 SelectiveHydrationLane: Lane = /* */ 0b0001000000000000000000000000000;
// 不能idle的优先级集合
const NonIdleLanes = /* */ 0b0001111111111111111111111111111;
export const IdleHydrationLane: Lane = /* */ 0b0010000000000000000000000000000;
export const IdleLane: Lanes = /* */ 0b0100000000000000000000000000000;
export const OffscreenLane: Lane = /*
这里再说一个对Lanes的解读，对后面的行文有帮助。按照上面的源码可以看出，一个Lane优先级里面只会有一个1，以“xxxLane”作为命名方式，当在源码中遇见以复数形式表现的Lanes，就需要明白这是有多个优先级组合在一起，也就对应着是有多个任务组合在一起的。Lanes代表的是多个任务，不是一个任务，这一点记住。
ReactEvent的优先级
React Event优先级的key是单独定义的，但是优先级对应的value，还是用的Lane模型里面部分Lane的值（注意是Lane不是Lanes）。怎么理解，意思就是说React Event优先级和Lane模型优先级是两套优先级，但是用的是一套优先级值，这个值就是ReactFiberLane里面定义的Lane相关的值：
// React事件优先级 ReactEventPriorities.old.js
// 事件type
export opaque type EventPriority = Lane;
// 离散事件优先级 指点击、input等 优先级最高
export const DiscreteEventPriority: EventPriority = SyncLane;
// 连续事件优先级 指滚动、拖拽等
export const ContinuousEventPriorit: EventPriority = InputContinuousLane;
// 默认事件优先级
export const DefaultEventPriority: EventPriority = DefaultLane;
// 闲置事件优先级
export const Idl
React调度过程
讲React调度过程，需要再明确下scheduler的职责：提供优先级调度能力和中断能力。优先级调度传入优先级和回调函数即可，而中断能力只是对外提供了一个API，具体怎么使用，还需要在调度的回调函数里面根据需要进行使用（请理解这句话）。
React中，每一次更新（源码中叫update）都是有优先级的，有优先级则意味着需要合理安排顺序进行调度。源码中每一个更新都需要调用scheduleUpdateOnFiber函数来准备这次更新的调度，然后调用ensureRootIsScheduled来发起调度，调度的回调函数是什么，就是我们熟悉的fiber diff过程的入口函数。每一次更新的目的就是为了产生新的fiber树, 并且需要结合环境情况决定是否中断。
从React产生更新后，到生成新的fiber树然后commit出去的这个过程，大致可以用一个简版流程概括，这个属于reconciler的内容，不明白也可以，只要知道是这个调用顺序就行：
在源码中，performSyncWorkOnRoot会调用workLoopSync，对应同步模式的diff，performConcurrentWorkOnRoot会调用workLoopConcurrent，对应concurrent模式的diff，其中这两个函数源码如下：
// /** @noinline */ concurrent模式
function workLoopConcurrent() {
// Perform work until Scheduler asks us to yield
while (workInProgress !== null && !shouldYield()) {
performUnitOfWork(workInProgress);
}
}
// /** @noinline */ 同步模式
function workLoopSync() {
// Already timed out, so perform work without checking if we need to yield.
while (workInProgress !== null) {
performUnitOfWork(workInProgress);
}
}
可以很直观的看到区别，Concurrent Mode需要在执行一轮performUnitOfWork后判断是否需要中断，如果需要中断则需要保存计算出的结果，并停止轮询。至于中断后怎么启动以及怎么复用之前的结果，这属于reconciler的内容了，暂时不讨论（在performConcurrentWorkOnRot中，可以自己看下）,所以这里就很直白的阐述了：“scheduler的中断能力需要在具体的回调中进行使用”。
优先级的转换
上一节大致说了一下React调度过程，主要是为了让我们能够理解React的优先级作用在哪个阶段：进入scheduler模块之前的阶段。
因此在ensureRootIsScheduled函数中就需要进行一个优先级的转换，将当前的更新优先级转换为scheduler的优先级，看一下ensureRootIsScheduled中相关部分的源码：
// ensureRootIsScheduled ReactFiberWorkLoop.old.js
let schedulerPriorityLevel;
switch (lanesToEventPriority(nextLanes)) {
case DiscreteEventPriority:
schedulerPriorityLevel = ImmediateSchedulerPriority;
break;
case ContinuousEventPriority:
schedulerPriorityLevel = UserBlockingSchedulerPriority;
break;
case DefaultEventPriority:
schedulerPriorityLevel = NormalSchedulerPriority;
break;
case IdleEventPriority:
schedulerPriorityLevel = IdleSchedulerPriority;
break;
default:
schedulerPriorityLevel = NormalSchedulerPriority;
break;
}
newCallbackNode = scheduleCallback(
schedulerPriorityLevel,
performConcurrentWorkOnRoot.bind(null, root),
);
可以看到，首先将Lane模型的优先级转换为React Event的优先级，因为他们的值都是Lane值，所以只需要做个多对少的映射就好了。然后将React Event优先级映射到scheduler的优先级，再调用scheduler的调度函数scheduleCallback完成一次调度下发：
// a比b的优先级高 返回true
export function isHigherEventPriority(
a: EventPriority,
b: EventPriority,
): boolean {
return a !== 0 && a < b;
}
// lanes模型优先级转换为react event优先级
export function lanesToEventPriority(lanes: Lanes): EventPriority {
// 获取最高优先级的lane 即lanes最右边
const lane = getHighestPriorityLane(lanes);
// lane的最高优先级采用math.floor这种转换策略
// 如果lane的优先级不低于DiscreteEventPriority 返回DiscreteEventPriority
if (!isHigherEventPriority(DiscreteEventPriority, lane)) {
return DiscreteEventPriority;
}
if (!isHigherEventPriority(ContinuousEventPriority, lane)) {
return ContinuousEventPriority;
}
// 如果lane中包含了不是idel的优先级
if (includesNonIdleWork(lane)) {
return DefaultEventPriority;
}
return IdleEventPriority;
}
优先级涉及到的饥饿和插队
同scheduler一样，只要有优先级机制，就会涉及到任务饥饿（过期）和高优先级插队。那么在一次更新中，React怎么处理这两种情况。
首先说一下，React的一次更新是从FiberRootNode开始的（这也是reconciler相关的内容），页面上需要更新的都是他的子节点，因此ensureRootIsScheduled的处理是root（第一个参数是root），那么获取这次更新的所有任务的优先级，也就是从root上获取。
任务饥饿问题在ensureRootIsScheduled中调用markStarvedLanesAsExpired进行了处理，原理就是检测剩下的Lanes中任务是否达到过期时间，如果达到过期时间，则将任务标记为过期，这个任务的对应的Lane值放在root的expiredLanes里面；如果还未过期，则不管；如果是刚进来的任务，则这个时候他还没有过期时间这一说，通过这个刚进来的任务的Lane值，计算出一个过期时间。
// 标记饥饿任务
export function markStarvedLanesAsExpired(
root: FiberRoot,
currentTime: number,
): void {
// TODO: This gets called every time we yield. We can optimize by storing
// the earliest expiration time on the root. Then use that to quickly bail out
// of this function.
const pendingLanes = root.pendingLanes;
const suspendedLanes = root.suspendedLanes;
const pingedLanes = root.pingedLanes;
const expirationTimes = root.expirationTimes;
// Iterate through the pending lanes and check if we've reached their
// expiration time. If so, we'll assume the update is being starved and mark
// it as expired to force it to finish.
let lanes = pendingLanes;
// 轮询等待中的任务
while (lanes > 0) {
// 每次获取最右边的任务
const index = pickArbitraryLaneIndex(lanes);
const lane = 1 << index;
// 如果当前任务没有设置过期时间 则计算出过去时间
const expirationTime = expirationTimes[index];
if (expirationTime === NoTimestamp) {
// Found a pending lane with no expiration time. If it's not suspended, or
// if it's pinged, assume it's CPU-bound. Compute a new expiration time
// using the current time.
if (
(lane & suspendedLanes) === NoLanes ||
(lane & pingedLanes) !== NoLanes
) {
// Assumes timestamps are monotonically increasing.
expirationTimes[index] = computeExpirationTime(lane, currentTime);
}
} else if (expirationTime <= currentTime) {
// This lane expired
// 如果已经过期 则添加到expiredLanes
root.expiredLanes |= lane;
}
lanes &= ~lane;
}
}
过期任务被标记后，进入下一轮reconciler的时候会进行处理，还记得上面说的React调度过程吗，scheduler后面会进入performConcurrentWorkOnRoot，在performConcurrentWorkOnRoot中会对有过期任务的情况进行优先处理，以同步模式进行:
// performConcurrentWorkOnRoot
// shouldTimeSlice 是否时间分片 有过期任务就不能
const shouldTimeSlice =
!includesBlockingLane(root, lanes) &&
!includesExpiredLane(root, lanes) &&
(disableSchedulerTimeoutInWorkLoop || !didTimeout);
// 不适用时间分片的时候直接使用同步模式渲染
let exitStatus = shouldTimeSlice
? renderRootConcurrent(root, lanes)
: renderRootSync(root, lanes);
对于更高优先级的任务带来的插队情况，只需要判断当前更新产生的Lanes中最高优先级（最小Lane值）和正在运行的任务的优先级是否相同（Lane值是否相等）就行了。如果相等，那当前更新老老实实排队就好了；如果不相等，则证明当前更新带来的任务是有更高的优先级，需要插队。
为什么不相等就需要插队？因为当前更新产生的Lanes中是保存的是原来正在运行的和未运行的任务，包含了正在运行的任务的优先级，而正在运行的肯定是原来最高的优先级，所以这个Lanes的最优先级永远大于等于正在运行的任务的优先级。等于的情况则表示当前运行的任务的优先级就是最高的了，大于的情况则表示有更高优先级的任务需要处理。
整个优先级调度其实就围绕着ensureRootIsScheduled函数展开，贴一下含有注释的全貌，就一目了然了。
// Use this function to schedule a task for a root. There's only one task per
// root; if a task was already scheduled, we'll check to make sure the priority
// of the existing task is the same as the priority of the next level that the
// root has work on. This function is called on every update, and right before
// exiting a task.
// ReactFiberWorkLoop.old.js
// 调度函数
function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
const existingCallbackNode = root.callbackNode;
// 处理任务饥饿的情况
// Check if any lanes are being starved by other work. If so, mark them as
// expired so we know to work on those next.
markStarvedLanesAsExpired(root, currentTime);
// Determine the next lanes to work on, and their priority.
// 获取接下来还需要执行的任务的集合 lanes
const nextLanes = getNextLanes(
root,
root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
);
// 接下来不需要处理任务 则不用进行本次调度了 直接返回
if (nextLanes === NoLanes) {
// Special case: There's nothing to work on.
if (existingCallbackNode !== null) {
cancelCallback(existingCallbackNode);
}
root.callbackNode = null;
root.callbackPriority = NoLane;
return;
}
// We use the highest priority lane to represent the priority of the callback.
// 获取最高优先级的任务
const newCallbackPriority = getHighestPriorityLane(nextLanes);
// Check if there's an existing task. We may be able to reuse it.
// 获取现在已经正在执行的任务的优先级
const existingCallbackPriority = root.callbackPriority;
// 因为newCallbackPriority是新的所有任务的优先级，包含着原来的任务（即包含着existingCallbackPriority）
// 所以不可能比existingCallbackPriority优先级更低
if (
// 如果正在执行的任务的优先级和当前任务最高的优先级一样 就不需要调度此次更新 老老实实排队
existingCallbackPriority === newCallbackPriority &&
// Special case related to `act`. If the currently scheduled task is a
// Scheduler task, rather than an `act` task, cancel it and re-scheduled
// on the `act` queue.
// The priority hasn't changed. We can reuse the existing task. Exit.
return;
}
// 有更高优先级的任务插队 则取消原来的生成的fiber 重新走一个新的
if (existingCallbackNode != null) {
// Cancel the existing callback. We'll schedule a new one below.
cancelCallback(existingCallbackNode);
}
// 生成新的fiber newCallbackNode
// Schedule a new callback.
let newCallbackNode;
// 最高优先级是同步级别 则采用同步更新
if (newCallbackPriority === SyncLane) {
// Special case: Sync React callbacks are scheduled on a special
// internal queue
// 不同模式下d 同步调度
if (root.tag === LegacyRoot) {
if (__DEV__ && ReactCurrentActQueue.isBatchingLegacy !== null) {
ReactCurrentActQueue.didScheduleLegacyUpdate = true;
}
scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
} else {
scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
}
// 如果支持Microtasks 则在本轮就进行同步了
if (supportsMicrotasks) {
// Flush the queue in a microtask.
if (__DEV__ && ReactCurrentActQueue.current !== null) {
// Inside `act`, use our internal `act` queue so that these get flushed
// at the end of the current scope even when using the sync version
// of `act`.
ReactCurrentActQueue.current.push(flushSyncCallbacks);
} else {
scheduleMicrotask(() => {
// In Safari, appending an iframe forces microtasks to run.
// https://github.com/facebook/react/issues/22459
// We don't support running callbacks in the middle of render
// or commit so we need to check against that.
if (executionContext === NoContext) {
// It's only safe to do this conditionally because we always
// check for pending work before we exit the task.
flushSyncCallbacks();
}
});
}
} else {
// 如果不支持 就发给scheduler scheduler的messagechannel setImmediate都只会在下一轮进行
// 宏任务微任务原理
// Flush the queue in an Immediate task.
scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);
}
newCallbackNode = null;
} else {
// 如果不需要同步更新 则转换优先级以后 发给scheduler
let schedulerPriorityLevel;
switch (lanesToEventPriority(nextLanes)) {
case DiscreteEventPriority:
schedulerPriorityLevel = ImmediateSchedulerPriority;
break;
case ContinuousEventPriority:
schedulerPriorityLevel = UserBlockingSchedulerPriority;
break;
case DefaultEventPriority:
schedulerPriorityLevel = NormalSchedulerPriority;
break;
case IdleEventPriority:
schedulerPriorityLevel = IdleSchedulerPriority;
break;
default:
schedulerPriorityLevel = NormalSchedulerPriority;
break;
}
// 产生新的fiber
newCallbackNode = scheduleCallback(
schedulerPriorityLevel,
performConcurrentWorkOnRoot.bind(null, root),
);
}
root.callbackPriority = newCallbackPriority;
root.callbackNode = newCallbackNode;
}
总结
React scheduler整个系列就算完结了，总结就是React为了提供并发模式，结合不同宿主环境整出了scheduler这一套机制。从原理到源码上我们都进行了分析，需要多看几遍。
转载自:https://juejin.cn/post/7156146728352088077