本文我們分析React源碼中的queueMacroTask。
雖然檔案和函數被命名為enqueueTask,但它被匯入為queueMacroTask。與window.queueMicroTask不同,沒有window.queueMarcoTask等函數。 setTimeout 是 MacroTask 的一個範例。
了解更多有關事件循環、微任務和巨集任務的資訊。
/** * 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 不存在時用作後備:
在以下幾行:
https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L196
透過在 Next.js/React 中練習高階架構概念,將您的編碼技能提高 10 倍,學習最佳實踐並建立生產級專案。
我們是開源的 — https://github.com/thinkthroo/thinkthroo (請給我們一顆星!)
透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過
hello@thinkthroo.com聯絡我們以了解更多資訊!
參考文獻
以上是React原始碼中的queueMacroTask的詳細內容。更多資訊請關注PHP中文網其他相關文章!