首頁 > web前端 > js教程 > React原始碼中的queueMacroTask

React原始碼中的queueMacroTask

Linda Hamilton
發布: 2024-10-03 06:41:01
原創
307 人瀏覽過

本文我們分析React源碼中的queueMacroTask。

queueMacroTask in React source code

雖然檔案和函數被命名為enqueueTask,但它被匯入為queueMacroTask。與window.queueMicroTask不同,沒有window.queueMarcoTask等函數。 setTimeout 是 MacroTask 的一個範例。

了解更多有關事件循環、微任務和巨集任務的資訊。

React 的 enqueueTask:

/**
 * Copyright © 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
 */
let didWarnAboutMessageChannel = false;
let enqueueTaskImpl = null;
export default function enqueueTask(task: () => void): void {
   if (enqueueTaskImpl === null) {
     try {
       // read require off the module object to get around the bundlers.
       // we don't want them to detect a require and bundle a Node polyfill.
       const requireString = ('require' + Math.random()).slice(0, 7);
       // $FlowFixMe[invalid-computed-prop]
       const nodeRequire = module && module[requireString];
       // assuming we're in node, let's try to get node's
       // version of setImmediate, bypassing fake timers if any.
       enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;
       } catch (_err) {
       // we're in a browser
       // we can't use regular timers because they may still be faked
       // so we try MessageChannel+postMessage instead
       enqueueTaskImpl = function (callback: () => void) {
       if (__DEV__) {
         if (didWarnAboutMessageChannel === false) {
           didWarnAboutMessageChannel = true;
           if (typeof MessageChannel === 'undefined') {
             console.error(
             'This browser does not have a MessageChannel implementation, ' +
             'so enqueuing tasks via await act(async () => …) will fail. ' +
             'Please file an issue at https://github.com/facebook/react/issues ' +
             'if you encounter this warning.',
             );
           }
         }
       }
       const channel = new MessageChannel();
       channel.port1.onmessage = callback;
       channel.port2.postMessage(undefined);
     };
   }
  }
  return enqueueTaskImpl(task);
}
登入後複製

這段程式碼有註解解釋它的作用。我們可以在這裡學習一些技巧:

  • 在寫自己的 enqueque trask 時如何繞過捆綁器。

  • 在node env中,setImmediate可以用作MacroTask。

  • 在瀏覽器環境中,可以使用MessageChannel建立queueMacroTask效果。

此 enquequeTask 在 ReactAct.js 中作為 MacroTask 導入,並在 window.queueMicroTask 不存在時用作後備:

queueMacroTask in React source code

在以下幾行:

  • https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L196

  • https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L121

關於我們:

在 Think Throo,我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念,將您的編碼技能提高 10 倍,學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo (請給我們一顆星!)

透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過

hello@thinkthroo.com聯絡我們以了解更多資訊!

參考文獻

    https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L366
  • https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js
  • 3. https://javascript.info/event-loop





以上是React原始碼中的queueMacroTask的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板