本文我們分析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 原始碼中的用法。
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 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。
我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）
透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過hello@thinkthroo.com聯絡我們以了解更多資訊！
https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel
https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L42
以上是React原始碼中MessageChannel的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
