我們知道,Scheduler 是 React 提供的底層調度器。但是這個調度器具體是如何用的,可能大部分人都不太清楚了,好在 React 把內部的模塊封裝得都相對獨立,因此,我們可以想個辦法,單獨把他的 Scheduler 或者 Reconciler 單獨掏出來用。
在 React 的 github 倉庫中,找到如下路徑的文件:./packages/scheduler/src。
這里就是 Scheduler 的全部代碼,如圖所示,我們可以在 forks 目錄中,找到 Scheduler.js,這就是我們的目標文件,他引用了外部的幾個小模塊的內容。
// packages/scheduler/src/forks/Scheduler.jsimport 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 寫的,因此這里部分語法可能會報錯,需要我們要自己稍作調整才能直接使用,不過改動不大。
SchedulerFeatureFlags.js 的代碼非常簡單,就是定義了一些狀態來區分不同的執行階段。
/** * 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 封裝了幾個小頂堆的操作方法,用于優先級隊列的任務管理,因此常用的操作就是 pop、push、peek。
SchedulerPriorities.js 定義了幾個優先級的常量。
/** * 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 是用來分析性能的,我們在調試的時候可以用一下。一般來說都會將其關掉。
直接把這些文件復制出來,整理好,就能單獨使用了。我們可以看一下 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,};
我們可以在源碼中去明確這些方法的具體使用方式,然后根據你的需要選擇使用即可。
我們可以使用 unstable_scheduleCallback 來調度任務,這個方法接收三個參數。
function unstable_scheduleCallback( priorityLevel: PriorityLevel, callback: Callback, options?: {delay: number},)
priorityLevel 需要的參數我們在上面已經定義好的,數字越小,優先級越高。
callback 就是我們需要被調度的任務。
options 中,我們可以傳入 delay,來進一步降低任務執行的優先級,表示延遲任務。他會進入到 timerQueue 隊列而無法直接執行,只有在特定時機移入到了 taskQueue 中之后才會被執行。
unstable_scheduleCallback 返回一個 Task 對象,我們可以在源碼中看到這個對象大概長這樣。
var newTask: Task = { id: taskIdCounter++, callback, priorityLevel, startTime, expirationTime, sortIndex: -1,};
unstable_cancelCallback 可以取消正在調度的任務,在源碼內部內容,它通過重置 task.callback = null 來取消。
OK,了解了基本用法之后,我們就可以來使用它調度任務了。
想想如下代碼輸出順序如何?
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
由于他們優先級相同,所以會按照任務創建的先后順序來確定誰的優先級更高。因此,先創建的先執行。
現在我們調整一下優先級,思考一下代碼輸出順序如何。
unstable_scheduleCallback(LowPriority, () => { console.log(1)})unstable_scheduleCallback(NormalPriority, () => { console.log(2)})unstable_scheduleCallback(ImmediatePriority, () => { console.log(3)})unstable_scheduleCallback(NormalPriority, () => { console.log(4)})// 輸出結果:3,2,4,1
此時優先級不同,則優先級越高的先執行。
我們在創建任務時,會給任務添加一個 expirationTime 字段來表示任務執行時,是否超時。在回調函數中,可以接收一個參數來標記超時狀態。
unstable_scheduleCallback(NormalPriority, (isTimeout) => { console.log(4) console.log(isTimeout)})
他的判斷標準如下:
const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
expirationTime 的計算規則如下:
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,但是我們可以在主線程中執行一下耗時任務,讓其無法在超時時間以內執行。NormalPriority 優先級的超時時間至少是 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,執行時已經超時})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 執行,又卡了 100ms,那么 2 UserBlockingPriority 對應 250ms 延遲時間,此時也超時了。
此時我們要聲明一個任務來遍歷一個數組,數組中的每一項的執行時間都比較長,聲明數組如下:
const tasks: any[] = [ ["1", 3], ["2", 3], ["3", 5], ["4", 7], ["5", 9],];
我們可以結合 unstable_shouldYield 來判斷當前執行時間是否過長,然后以中斷遍歷過程的方式,中斷任務的執行。
function node_task() { console.log('開始執行任務') var task while(task = tasks.shift()) { var now = performance.now() // 卡住執行 while(performance.now() - now < task[1]) {} console.log(task[0], '小任務執行完畢') if (unstable_shouldYield()) { console.log('執行超過了 5ms,中斷執行') return node_task } }}
unstable_shouldYield 是超過 5ms 就需要中斷一次,此時我們發現,任務 1 與 任務 2 加起來超過了 5ms,因此 2 執行完之后,會中斷一次。,后面的每個任務都比較長,因此每個任務執行完都會中斷一次,所以總共會中斷 4 次。
調度之后,我們看看打印結果:
unstable_scheduleCallback(NormalPriority, node_task);
完整的符合預期。
我們只需要把上面的案例稍作調整,就能做到高優先級插隊。在 node_task 的執行過程中,我們利用 setTimeout 調度一個更高優先級的任務。
const tasks: any[] = [ ["1", 3], ["2", 3], ["3", 5], ["4", 7], ["5", 9],];function node_task() { console.log('--開始執行任務--') var task while(task = tasks.shift()) { var now = performance.now() // 卡住執行 while(performance.now() - now < task[1]) {} console.log(task[0], '小任務執行完畢') if (unstable_shouldYield()) { console.log('執行超過了 5ms,中斷執行') return node_task } }}unstable_scheduleCallback(NormalPriority, node_task);+ setTimeout(() => {+ unstable_scheduleCallback(ImmediatePriority, () => {+ console.log('我是高優先級插隊')+ });+ }, 10)
執行結果如下,插隊成功。
我們可以利用這一套優先級隊列的調度,解決實踐中的需求。例如,在開發彈幕功能的時候,我們會想辦法優先讓自己發的彈幕先彈出來。或者在消息彈窗提示時,優先彈出錯誤警告等。
本文鏈接:http://www.www897cc.com/showinfo-26-78500-0.html高端操作:把 React Scheduler 掏出來單獨用
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 定制JSON轉換:探索.NET Core中JsonSerializerOptions的秘密
下一篇: 面試官:說說零拷貝的實現原理?