この記事では、React ソース コードでの MessageChannel の使用状況を分析します。

まず、MessageChannel とは何かを理解しましょう。

メッセージチャンネル

チャネル メッセージング API の MessageChannel インターフェイスを使用すると、新しいメッセージ チャネルを作成し、その 2 つの MessagePort プロパティを介してデータを送信できます。

例

次の例は MDN ドキュメントから抜粋したものです。MessageChannel() コンストラクターを使用して新しいチャネルが作成されていることがわかります。

IFrame が読み込まれたら、MessageChannel.port1 の onmessage ハンドラーを登録し、メッセージとともに window.postMessage メソッドを使用して MessageChannel.port2 を IFrame に転送します。

IFrame からメッセージが返されると、onMessage 関数はメッセージを段落に出力します。

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;
  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
   channel.port2,
  ]);
}
// Handle messages received on port1
function onMessage(e) {
 output.innerHTML = e.data;
}

さて、MessageChannel の基本を理解したところで、React ソース コードでの使用法を学びましょう。

React ソース コードでの MessageChannel の使用:

const channel = new MessageChannel();
channel.port1.onmessage = callback;
channel.port2.postMessage(undefined);

React での使用方法は次のとおりです:

• 新しい MessageChannel インスタンスを作成する: React は 2 つの通信ポートを持つ新しい MessageChannel を作成します。

• postMessage を使用してタスクをスケジュールする: React は port2.postMessage(unknown) を使用して、setTimeout または setImmediate.

で発生する可能性のある遅延や干渉なしでタスクを非同期にトリガーします。

• onmessage がトリガーされたときにタスクを実行する: port1.onmessage が投稿されたメッセージを受信すると、タスク (enqueueTask に渡されるコールバック) が実行されます。

setTimeout または setImmediate を使用しないのはなぜですか? React コードは、setTimeout または setImmediate が常に正確であるとは限らず、スロットル、テスト環境、またはその他の最適化 (テスト環境での偽のタイマーなど) の影響を受ける可能性があるため、ブラウザー環境での setTimeout または setImmediate の使用を避けたいことを示唆しています。 React は、特に非同期レンダリングと更新に関して、スケジュールを細かく制御する必要があります。

私たちについて：

Think Throo では、オープンソース プロジェクトで使用される高度なコードベース アーキテクチャの概念を教えることを使命としています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、本番レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

コードベース アーキテクチャに基づいた高度なコースでチームのスキルを向上させます。詳細については、[email protected] までお問い合わせください。

参考文献:

• https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L42