JavaScript の queueMicroTask

この記事では、React ソースコードの queueMicroTask 関数を分析します

React は、ReactAct.js という名前のファイルで queueMicroTask を使用します。これはパブリック API です。

act は、アサーションを行う前に保留中の React 更新を適用するテスト ヘルパーです。

await act(async actFn)

ReactAct.js には多くのコードがあります。ここでは、queueMicroTask に焦点を絞りましょう。

queueMicroTask は ReactAct.js のどこで呼び出されますか?

queueSeveralMicrotasks はこの ReactAct.js ファイルの最後にあり、コールバックで queueMicroTask を呼び出し、その目的を説明する詳細なコメントが付いています。

queueSeveralMicrotasks は 2 つの場所で呼び出されていることがわかります:

• 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() メソッドは、制御がブラウザのイベント ループに戻る前に、安全な時間に実行されるマイクロタスクをキューに入れます。

マイクロタスクは、現在のタスクが作業を完了した後、実行を待機しているコードが他になくなったときに、実行コンテキストの制御がブラウザーのイベント ループに返される前に実行される短い関数です。

これにより、他の保留中の優先度の高いコードを妨げることなくコードを実行できますが、完了する必要がある作業に応じて、ブラウザーが実行コンテキストの制御を取り戻す前に実行できます。

queueMicroTask の詳細については、MDN ドキュメントを参照してください。

例:

これは、マイクロタスクとマクロタスクがブラウザの実行とどのように対話するかを示す例です:

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 の queueMicroTaskの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。