俄羅斯：將審查iPhone等外國公司設備 保數據安全
iPhone和特斯拉都屬于在各自領域領頭羊的品牌，推出的產品也也都是數一數二的，但對于一些國家而言，它們的產品可靠性和安全性還是在限制范圍內。近日，俄羅斯聯邦通信、信息技術
我們知道，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的秘密
下一篇： 面試官：說說零拷貝的實現原理？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號