JavaScript 中的队列微任务

本文我们分析React源码中的queueMicroTask函数

React 在名为 ReactAct.js 的文件中使用queueMicroTask。这是一个公共 API，请执行。

act 是一个测试助手，用于在做出断言之前应用待处理的 React 更新。

await act(async actFn)

ReactAct.js 有很多代码，让我们把重点缩小到queueMicroTask。

ReactAct.js 中在哪里调用了queueMicroTask？

queueSeveralMicrotasks 位于此 ReactAct.js 文件的末尾，它通过回调调用queueMicroTask，并有详细的注释解释其用途。

queueSeveralMicrotasks 发现在两个地方被调用：

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

// Warn if the an `act` call with an async scope is not awaited. In a
 // future release, consider making this an error.
 queueSeveralMicrotasks(() => {
   if (!didAwaitActCall && !didWarnNoAwaitAct) {
     didWarnNoAwaitAct = true;
     console.error(
       'You called act(async () => …) without await. ' +
       'This could lead to unexpected testing behaviour, ' +
       'interleaving multiple act calls and mixing their ' +
       'scopes. ' +
       'You should - await act(async () => …);',
     );
   }
 });

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

// Warn if something suspends but the `act` call is not awaited.
// In a future release, consider making this an error.
if (queue.length !== 0) {
 queueSeveralMicrotasks(() => {
 if (!didAwaitActCall && !didWarnNoAwaitAct) {
   didWarnNoAwaitAct = true;
   console.error(
     'A component suspended inside an `act` scope, but the ' +
     '`act` call was not awaited. When testing React ' +
     'components that depend on asynchronous data, you must ' +
     'await the result:\n\n' +
     'await act(() => …)',
   );
   }
 });
}

现在我们了解了queueMicroTask的使用方法，现在让我们了解一下queueMicroTask的定义。

队列微任务

Window 接口的queueMicrotask() 方法将微任务排队，以便在控制权返回浏览器的事件循环之前的安全时间执行。

微任务是一个简短的函数，它将在当前任务完成其工作之后运行，并且在执行上下文的控制权返回到浏览器的事件循环之前没有其他代码等待运行。

这可以让您的代码运行时不会干扰任何其他可能具有更高优先级的待处理代码，但在浏览器重新获得对执行上下文的控制之前，这可能取决于您需要完成的工作。

在 MDN 文档中了解有关queueMicroTask 的更多信息。

示例：

以下是微任务和宏任务如何与浏览器执行交互的示例：

console.log('Synchronous 1'); // 1
Promise.resolve().then(() => {
 console.log('Microtask 1'); // 3
});
console.log('Synchronous 2'); // 2
setTimeout(() => {
 console.log('Macrotask 1'); // 5
}, 0);
console.log('Synchronous 3'); // 4

细分：

同步代码首先运行，输出：

‘同步1’

‘同步2’

《同步3》

在浏览器有机会处理任何待处理的渲染或宏任务之前，会处理微任务队列：

Promise.resolve().then(...) 回调被添加到微任务队列中，并在同步代码块完成后立即执行，记录：

“微任务 1”

微任务队列清空后，浏览器重新获得控制权并可以：

运行宏任务，例如 setTimeout 回调，它会记录：

“宏任务 1”

最终输出

Synchronous 1
Synchronous 2
Synchronous 3
Microtask 1
Macrotask 1

关于我们：

在 Think Throo，我们的使命是教授开源项目中使用的高级代码库架构概念。

通过在 Next.js/React 中练习高级架构概念，将您的编码技能提高 10 倍，学习最佳实践并构建生产级项目。

我们是开源的 — https://github.com/thinkthroo/thinkthroo （请给我们一颗星！）

通过我们基于代码库架构的高级课程来提高您的团队的技能。请通过hello@thinkthroo.com联系我们了解更多信息！

参考资料：

1. https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask

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

3. https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

4. https://react.dev/reference/react/act

5. https://javascript.info/event-loop

以上是JavaScript 中的队列微任务的详细内容。更多信息请关注PHP中文网其他相关文章！