這篇文章我們分析React原始碼中MessageChannel的用法。

我們先來了解什麼是MessageChannel。

訊息頻道

Channel Messaging API 的 MessageChannel 介面允許我們建立一個新的訊息通道並透過它的兩個 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 建立一個具有兩個通訊連接埠的新 MessageChannel。

• 使用 postMessage 安排任務：React 使用 port2.postMessage(undefined) 非同步觸發任務，不會出現 setTimeout 或 setImmediate 可能出現的延遲或乾擾。

• 觸發onmessage時執行任務：當port1.onmessage收到發布的訊息時執行任務（即傳遞給enqueueTask的回呼）。

為什麼不使用setTimeout或setImmediate？ React 程式碼暗示他們希望避免在瀏覽器環境中使用 setTimeout 或 setImmediate，因為它們並不總是精確的，並且可能受到限制、測試環境或其他最佳化（例如測試環境中的偽造計時器）的影響。 React 希望對調度進行精細控制，尤其是在非同步渲染和更新方面。

關於我們：

在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

我們是開源的 — 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

]