この記事では、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 トラスクを作成するときにバンドラーを回避する方法。
ノード環境では、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 中国語 Web サイトの他の関連記事を参照してください。