高端操作：把 React Scheduler 掏出來單獨用

作者：這波能反殺丶 2024-03-22 07:48:51

Scheduler 是 React 提供的底層調(diào)度器。但是這個調(diào)度器具體是如何用的，可能大部分人都不太清楚了，好在 React 把內(nèi)部的模塊封裝得都相對獨立，因此，我們可以想個辦法，單獨把他的 Scheduler 或者 Reconciler 單獨掏出來用。

我們知道，Scheduler 是 React 提供的底層調(diào)度器。但是這個調(diào)度器具體是如何用的，可能大部分人都不太清楚了，好在 React 把內(nèi)部的模塊封裝得都相對獨立，因此，我們可以想個辦法，單獨把他的 Scheduler 或者 Reconciler 單獨掏出來用。

一、怎么掏

在 React 的 github 倉庫中，找到如下路徑的文件：./packages/scheduler/src。

這里就是 Scheduler 的全部代碼，如圖所示，我們可以在 forks 目錄中，找到 Scheduler.js，這就是我們的目標文件，他引用了外部的幾個小模塊的內(nèi)容。

// packages/scheduler/src/forks/Scheduler.js
import type {PriorityLevel} from '../SchedulerPriorities';

import {
  enableSchedulerDebugging,
  enableProfiling,
  enableIsInputPending,
  enableIsInputPendingContinuous,
  frameYieldMs,
  continuousYieldMs,
  maxYieldMs,
  userBlockingPriorityTimeout,
  lowPriorityTimeout,
  normalPriorityTimeout,
} from '../SchedulerFeatureFlags';

import {push, pop, peek} from '../SchedulerMinHeap';

// TODO: Use symbols?
import {
  ImmediatePriority,
  UserBlockingPriority,
  NormalPriority,
  LowPriority,
  IdlePriority,
} from '../SchedulerPriorities';
import {
  markTaskRun,
  markTaskYield,
  markTaskCompleted,
  markTaskCanceled,
  markTaskErrored,
  markSchedulerSuspended,
  markSchedulerUnsuspended,
  markTaskStart,
  stopLoggingProfilingEvents,
  startLoggingProfilingEvents,
} from '../SchedulerProfiling';

export type Callback = boolean => ?Callback;

這里需要注意的是，從 github 上掏出來的代碼不是用 TS 寫的，而是用 flow 寫的，因此這里部分語法可能會報錯，需要我們要自己稍作調(diào)整才能直接使用，不過改動不大。

SchedulerFeatureFlags.js 的代碼非常簡單，就是定義了一些狀態(tài)來區(qū)分不同的執(zhí)行階段。

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict
 */

export const enableSchedulerDebugging = false;
export const enableIsInputPending = false;
export const enableProfiling = false;
export const enableIsInputPendingContinuous = false;
export const frameYieldMs = 5;
export const continuousYieldMs = 50;
export const maxYieldMs = 300;

export const userBlockingPriorityTimeout = 250;
export const normalPriorityTimeout = 5000;
export const lowPriorityTimeout = 10000;

SchedulerMinHeap.js 封裝了幾個小頂堆的操作方法，用于優(yōu)先級隊列的任務管理，因此常用的操作就是 pop、push、peek。

SchedulerPriorities.js 定義了幾個優(yōu)先級的常量。

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict
 */

export type PriorityLevel = 0 | 1 | 2 | 3 | 4 | 5;

// TODO: Use symbols?
export const NoPriority = 0;
export const ImmediatePriority = 1;
export const UserBlockingPriority = 2;
export const NormalPriority = 3;
export const LowPriority = 4;
export const IdlePriority = 5;

SchedulerProfiling.js 是用來分析性能的，我們在調(diào)試的時候可以用一下。一般來說都會將其關(guān)掉。

直接把這些文件復制出來，整理好，就能單獨使用了。我們可以看一下 Scheduler.js 返回了什么方法。

export {
  ImmediatePriority as unstable_ImmediatePriority,
  UserBlockingPriority as unstable_UserBlockingPriority,
  NormalPriority as unstable_NormalPriority,
  IdlePriority as unstable_IdlePriority,
  LowPriority as unstable_LowPriority,
  unstable_runWithPriority,
  unstable_next,
  unstable_scheduleCallback,
  unstable_cancelCallback,
  unstable_wrapCallback,
  unstable_getCurrentPriorityLevel,
  shouldYieldToHost as unstable_shouldYield,
  requestPaint as unstable_requestPaint,
  unstable_continueExecution,
  unstable_pauseExecution,
  unstable_getFirstCallbackNode,
  getCurrentTime as unstable_now,
  forceFrameRate as unstable_forceFrameRate,
};

我們可以在源碼中去明確這些方法的具體使用方式，然后根據(jù)你的需要選擇使用即可。

二、語法介紹

我們可以使用 unstable_scheduleCallback 來調(diào)度任務，這個方法接收三個參數(shù)。

function unstable_scheduleCallback(
  priorityLevel: PriorityLevel,
  callback: Callback,
  options?: {delay: number},
)

priorityLevel 需要的參數(shù)我們在上面已經(jīng)定義好的，數(shù)字越小，優(yōu)先級越高。

callback 就是我們需要被調(diào)度的任務。

options 中，我們可以傳入 delay，來進一步降低任務執(zhí)行的優(yōu)先級，表示延遲任務。他會進入到 timerQueue 隊列而無法直接執(zhí)行，只有在特定時機移入到了 taskQueue 中之后才會被執(zhí)行。

unstable_scheduleCallback 返回一個 Task 對象，我們可以在源碼中看到這個對象大概長這樣。

var newTask: Task = {
  id: taskIdCounter++,
  callback,
  priorityLevel,
  startTime,
  expirationTime,
  sortIndex: -1,
};

unstable_cancelCallback 可以取消正在調(diào)度的任務，在源碼內(nèi)部內(nèi)容，它通過重置 task.callback = null 來取消。

OK，了解了基本用法之后，我們就可以來使用它調(diào)度任務了。

三、使用

想同優(yōu)先級

想想如下代碼輸出順序如何？

unstable_scheduleCallback(NormalPriority, () => {
  console.log(1)
})

unstable_scheduleCallback(NormalPriority, () => {
  console.log(2)
})

unstable_scheduleCallback(NormalPriority, () => {
  console.log(3)
})

unstable_scheduleCallback(NormalPriority, () => {
  console.log(4)
})

// 輸出順序：1, 2, 3, 4

由于他們優(yōu)先級相同，所以會按照任務創(chuàng)建的先后順序來確定誰的優(yōu)先級更高。因此，先創(chuàng)建的先執(zhí)行。

不同優(yōu)先級

現(xiàn)在我們調(diào)整一下優(yōu)先級，思考一下代碼輸出順序如何。

unstable_scheduleCallback(LowPriority, () => {
  console.log(1)
})

unstable_scheduleCallback(NormalPriority, () => {
  console.log(2)
})

unstable_scheduleCallback(ImmediatePriority, () => {
  console.log(3)
})

unstable_scheduleCallback(NormalPriority, () => {
  console.log(4)
})
// 輸出結(jié)果：3,2,4,1

此時優(yōu)先級不同，則優(yōu)先級越高的先執(zhí)行。

任務是否超時

我們在創(chuàng)建任務時，會給任務添加一個 expirationTime 字段來表示任務執(zhí)行時，是否超時。在回調(diào)函數(shù)中，可以接收一個參數(shù)來標記超時狀態(tài)。

unstable_scheduleCallback(NormalPriority, (isTimeout) => {
  console.log(4)
  console.log(isTimeout)
})

他的判斷標準如下：

const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;

expirationTime 的計算規(guī)則如下：

var timeout;
switch (priorityLevel) {
  case ImmediatePriority:
    // Times out immediately
    timeout = -1;
    break;
  case UserBlockingPriority:
    // Eventually times out
    timeout = userBlockingPriorityTimeout;
    break;
  case IdlePriority:
    // Never times out
    timeout = maxSigned31BitInt;
    break;
  case LowPriority:
    // Eventually times out
    timeout = lowPriorityTimeout;
    break;
  case NormalPriority:
  default:
    // Eventually times out
    timeout = normalPriorityTimeout;
    break;
}

var expirationTime = startTime + timeout;

上面案例通常情況下會返回 false，但是我們可以在主線程中執(zhí)行一下耗時任務，讓其無法在超時時間以內(nèi)執(zhí)行。NormalPriority 優(yōu)先級的超時時間至少是 5000ms。

sunstable_scheduleCallback(NormalPriority, (isTimeout) => {
  console.log(4)
  console.log(isTimeout) // false
})

const currentTime = performance.now()
while(performance.now() - currentTime < 5000) {}
unstable_scheduleCallback(NormalPriority, (isTimeout) => {
  console.log(4)
  console.log(isTimeout) // true，執(zhí)行時已經(jīng)超時
})

const currentTime = performance.now()
while(performance.now() - currentTime < 5000) {}

再來看一個例子：

unstable_scheduleCallback(UserBlockingPriority, (isTimeout) => {
  console.log(2)
  console.log(isTimeout) // true
})

unstable_scheduleCallback(ImmediatePriority, (isTimeout) => {
  console.log(3)
  const currentTime = performance.now()
  while(performance.now() - currentTime < 100) {}
  console.log(isTimeout) // true
})

unstable_scheduleCallback(NormalPriority, (isTimeout) => {
  console.log(4)
  console.log(isTimeout) // false
})

const currentTime = performance.now()
while(performance.now() - currentTime < 200) {}

此時主線程卡住 200ms，因此 3 ImmediatePriority 超時。此時 3 執(zhí)行，又卡了 100ms，那么 2 UserBlockingPriority 對應 250ms 延遲時間，此時也超時了。

任務中斷

此時我們要聲明一個任務來遍歷一個數(shù)組，數(shù)組中的每一項的執(zhí)行時間都比較長，聲明數(shù)組如下：

const tasks: any[] = [
  ["1", 3],
  ["2", 3],
  ["3", 5],
  ["4", 7],
  ["5", 9],
];

我們可以結(jié)合 unstable_shouldYield 來判斷當前執(zhí)行時間是否過長，然后以中斷遍歷過程的方式，中斷任務的執(zhí)行。

function node_task() {
  console.log('開始執(zhí)行任務')
  var task
  while(task = tasks.shift()) {
    var now = performance.now()
    // 卡住執(zhí)行
    while(performance.now() - now < task[1]) {}
    console.log(task[0], '小任務執(zhí)行完畢')
    if (unstable_shouldYield()) {
      console.log('執(zhí)行超過了 5ms，中斷執(zhí)行')
      return node_task
    }
  }
}

unstable_shouldYield 是超過 5ms 就需要中斷一次，此時我們發(fā)現(xiàn)，任務 1 與任務 2 加起來超過了 5ms，因此 2 執(zhí)行完之后，會中斷一次。，后面的每個任務都比較長，因此每個任務執(zhí)行完都會中斷一次，所以總共會中斷 4 次。

調(diào)度之后，我們看看打印結(jié)果：

unstable_scheduleCallback(NormalPriority, node_task);

完整的符合預期。

高優(yōu)先級插隊

我們只需要把上面的案例稍作調(diào)整，就能做到高優(yōu)先級插隊。在 node_task 的執(zhí)行過程中，我們利用 setTimeout 調(diào)度一個更高優(yōu)先級的任務。

const tasks: any[] = [
  ["1", 3],
  ["2", 3],
  ["3", 5],
  ["4", 7],
  ["5", 9],
];

function node_task() {
  console.log('--開始執(zhí)行任務--')
  var task
  while(task = tasks.shift()) {
    var now = performance.now()
    // 卡住執(zhí)行
    while(performance.now() - now < task[1]) {}
    console.log(task[0], '小任務執(zhí)行完畢')
    if (unstable_shouldYield()) {
      console.log('執(zhí)行超過了 5ms，中斷執(zhí)行')
      return node_task
    }
  }
}

unstable_scheduleCallback(NormalPriority, node_task);
+ setTimeout(() => {
+   unstable_scheduleCallback(ImmediatePriority, () => {
+     console.log('我是高優(yōu)先級插隊')
+  });
+ }, 10)

執(zhí)行結(jié)果如下，插隊成功。

四、總結(jié)

我們可以利用這一套優(yōu)先級隊列的調(diào)度，解決實踐中的需求。例如，在開發(fā)彈幕功能的時候，我們會想辦法優(yōu)先讓自己發(fā)的彈幕先彈出來。或者在消息彈窗提示時，優(yōu)先彈出錯誤警告等。

責任編輯：姜華來源：這波能反殺