日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

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

來源: 責編: 時間:2024-03-22 08:54:02 176觀看
導讀我們知道,Scheduler 是 React 提供的底層調度器。但是這個調度器具體是如何用的,可能大部分人都不太清楚了,好在 React 把內部的模塊封裝得都相對獨立,因此,我們可以想個辦法,單獨把他的 Scheduler 或者 Reconciler 單獨掏

zXh28資訊網——每日最新資訊28at.com

我們知道,Scheduler 是 React 提供的底層調度器。但是這個調度器具體是如何用的,可能大部分人都不太清楚了,好在 React 把內部的模塊封裝得都相對獨立,因此,我們可以想個辦法,單獨把他的 Scheduler 或者 Reconciler 單獨掏出來用。zXh28資訊網——每日最新資訊28at.com

一、怎么掏

在 React 的 github 倉庫中,找到如下路徑的文件:./packages/scheduler/src。zXh28資訊網——每日最新資訊28at.com

zXh28資訊網——每日最新資訊28at.com

這里就是 Scheduler 的全部代碼,如圖所示,我們可以在 forks 目錄中,找到 Scheduler.js,這就是我們的目標文件,他引用了外部的幾個小模塊的內容。zXh28資訊網——每日最新資訊28at.com

// 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 寫的,因此這里部分語法可能會報錯,需要我們要自己稍作調整才能直接使用,不過改動不大。zXh28資訊網——每日最新資訊28at.com

SchedulerFeatureFlags.js 的代碼非常簡單,就是定義了一些狀態來區分不同的執行階段。zXh28資訊網——每日最新資訊28at.com

/** * 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。zXh28資訊網——每日最新資訊28at.com

SchedulerPriorities.js 定義了幾個優先級的常量。zXh28資訊網——每日最新資訊28at.com

/** * 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 是用來分析性能的,我們在調試的時候可以用一下。一般來說都會將其關掉。zXh28資訊網——每日最新資訊28at.com

直接把這些文件復制出來,整理好,就能單獨使用了。我們可以看一下 Scheduler.js 返回了什么方法。zXh28資訊網——每日最新資訊28at.com

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,};

我們可以在源碼中去明確這些方法的具體使用方式,然后根據你的需要選擇使用即可。zXh28資訊網——每日最新資訊28at.com

二、語法介紹

我們可以使用 unstable_scheduleCallback 來調度任務,這個方法接收三個參數。zXh28資訊網——每日最新資訊28at.com

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

priorityLevel 需要的參數我們在上面已經定義好的,數字越小,優先級越高。zXh28資訊網——每日最新資訊28at.com

callback 就是我們需要被調度的任務。zXh28資訊網——每日最新資訊28at.com

options 中,我們可以傳入 delay,來進一步降低任務執行的優先級,表示延遲任務。他會進入到 timerQueue 隊列而無法直接執行,只有在特定時機移入到了 taskQueue 中之后才會被執行。zXh28資訊網——每日最新資訊28at.com

unstable_scheduleCallback 返回一個 Task 對象,我們可以在源碼中看到這個對象大概長這樣。zXh28資訊網——每日最新資訊28at.com

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

unstable_cancelCallback 可以取消正在調度的任務,在源碼內部內容,它通過重置 task.callback = null 來取消。zXh28資訊網——每日最新資訊28at.com

OK,了解了基本用法之后,我們就可以來使用它調度任務了。zXh28資訊網——每日最新資訊28at.com

三、使用

想同優先級

想想如下代碼輸出順序如何?zXh28資訊網——每日最新資訊28at.com

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

由于他們優先級相同,所以會按照任務創建的先后順序來確定誰的優先級更高。因此,先創建的先執行。zXh28資訊網——每日最新資訊28at.com

不同優先級

現在我們調整一下優先級,思考一下代碼輸出順序如何。zXh28資訊網——每日最新資訊28at.com

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

此時優先級不同,則優先級越高的先執行。zXh28資訊網——每日最新資訊28at.com

任務是否超時

我們在創建任務時,會給任務添加一個 expirationTime 字段來表示任務執行時,是否超時。在回調函數中,可以接收一個參數來標記超時狀態。zXh28資訊網——每日最新資訊28at.com

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

他的判斷標準如下:zXh28資訊網——每日最新資訊28at.com

const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;

expirationTime 的計算規則如下:zXh28資訊網——每日最新資訊28at.com

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。zXh28資訊網——每日最新資訊28at.com

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) {}

再來看一個例子:zXh28資訊網——每日最新資訊28at.com

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 延遲時間,此時也超時了。zXh28資訊網——每日最新資訊28at.com

任務中斷

此時我們要聲明一個任務來遍歷一個數組,數組中的每一項的執行時間都比較長,聲明數組如下:zXh28資訊網——每日最新資訊28at.com

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

我們可以結合 unstable_shouldYield 來判斷當前執行時間是否過長,然后以中斷遍歷過程的方式,中斷任務的執行。zXh28資訊網——每日最新資訊28at.com

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 次。zXh28資訊網——每日最新資訊28at.com

調度之后,我們看看打印結果:zXh28資訊網——每日最新資訊28at.com

unstable_scheduleCallback(NormalPriority, node_task);

zXh28資訊網——每日最新資訊28at.com

完整的符合預期。zXh28資訊網——每日最新資訊28at.com

高優先級插隊

我們只需要把上面的案例稍作調整,就能做到高優先級插隊。在 node_task 的執行過程中,我們利用 setTimeout 調度一個更高優先級的任務。zXh28資訊網——每日最新資訊28at.com

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)

執行結果如下,插隊成功。zXh28資訊網——每日最新資訊28at.com

zXh28資訊網——每日最新資訊28at.com

四、總結

我們可以利用這一套優先級隊列的調度,解決實踐中的需求。例如,在開發彈幕功能的時候,我們會想辦法優先讓自己發的彈幕先彈出來。或者在消息彈窗提示時,優先彈出錯誤警告等。zXh28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-78500-0.html高端操作:把 React Scheduler 掏出來單獨用

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 定制JSON轉換:探索.NET Core中JsonSerializerOptions的秘密

下一篇: 面試官:說說零拷貝的實現原理?

標簽:
  • 熱門焦點
  • 一加Ace2 Pro真機揭曉 鈦空灰配色質感拉滿

    終于,在經過了幾波預熱之后,一加Ace2 Pro的外觀真機圖在網上出現了。還是博主數碼閑聊站曝光的,這次的外觀設計還是延續了一加11的方案,只是細節上有了調整,例如新加入了鈦空灰
  • 三言兩語說透設計模式的藝術-簡單工廠模式

    一、寫在前面工廠模式是最常見的一種創建型設計模式,通常說的工廠模式指的是工廠方法模式,是使用頻率最高的工廠模式。簡單工廠模式又稱為靜態工廠方法模式,不屬于GoF 23種設計
  • 一文看懂為蘋果Vision Pro開發應用程序

    譯者 | 布加迪審校 | 重樓蘋果的Vision Pro是一款混合現實(MR)頭戴設備。Vision Pro結合了虛擬現實(VR)和增強現實(AR)的沉浸感。其高分辨率顯示屏、先進的傳感器和強大的處理能力
  • 虛擬鍵盤 API 的妙用

    你是否在遇到過這樣的問題:移動設備上有一個固定元素,當激活虛擬鍵盤時,該元素被隱藏在了鍵盤下方?多年來,這一直是 Web 上的默認行為,在本文中,我們將探討這個問題、為什么會發生
  • 華為開發者大會2023日程公開:開設鴻蒙HarmonyOS 4體驗區

    IT之家 7 月 31 日消息,華為今日公布了 HDC.Together 開發者大會 2023 的詳細日程。整場大會將于 8 月 4 日-6 日之間舉行,屆時將發布最新一代鴻蒙 H
  • 2納米決戰2025

    集微網報道 從三強爭霸到四雄逐鹿,2nm的廝殺聲已然隱約傳來。無論是老牌勁旅臺積電、三星,還是誓言重回先進制程領先地位的英特爾,甚至初成立不久的新
  • iQOO 11S評測:行業唯一的200W標準版旗艦

    【Techweb評測】去年底,iQOO推出了“電競旗艦”iQOO 11系列,作為一款性能強機,該機不僅全球首發2K 144Hz E6全感屏,搭載了第二代驍龍8平臺及144Hz電競
  • iQOO Neo8系列新品發布會

    旗艦雙芯 更強更Pro
  • 電博會上海爾智家模擬500平大平層,還原生活空間沉浸式體驗

    電博會為了更好地讓參展觀眾真正感受到智能家居的絕妙之處,海爾智家的程傳嶺先生同樣介紹了展會上海爾智家的模擬500平大平層,還原生活空間沉浸式體驗。程傳
Top 主站蜘蛛池模板: 罗甸县| 芜湖县| 湖南省| 资中县| 永春县| 马公市| 左云县| 邯郸县| 韶山市| 石柱| 子长县| 黔西| 沈阳市| 静安区| 博爱县| 辉南县| 双峰县| 平舆县| 东海县| 逊克县| 巴林右旗| 高陵县| 广饶县| 元阳县| 绍兴县| 汉源县| 阳西县| 雷山县| 安阳市| 稷山县| 徐闻县| 水富县| 民丰县| 三台县| 朝阳市| 和林格尔县| 连州市| 沙河市| 长葛市| 临武县| 沧州市|