React源码中MessageChannel的使用

本文我们分析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 中练习高级架构概念，将您的编码技能提高 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中文网其他相关文章！