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中文網其他相關文章！