JavaScript の queueMicroTask-jsチュートリアル-php.cn

JavaScript の queueMicroTask

Barbara Streisand

リリース： 2024-10-02 06:31:29

オリジナル

766 人が閲覧しました

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

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

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

await act(async actFn)

ログイン後にコピー

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

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

queueMicroTask in JavaScript

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 までお問い合わせください。

参考文献:

https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask
https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L361
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
https://react.dev/reference/react/act
https://javascript.info/event-loop

以上がJavaScript の queueMicroTaskの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。