本文我们分析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
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中文网其他相关文章!