React使用BroadcastChannel向新开标签页传值失效如何解决

BroadcastChannel 本身不存储历史消息，只会把消息实时推送给已经完成频道连接、绑定好事件监听的同源上下文。
你当前代码的执行时序存在问题：点击按钮触发逻辑时，postMessage 会立刻执行发送消息，此时新标签页还处于加载初始化阶段，既没有创建BroadcastChannel实例，也没有绑定onmessage监听，自然收不到这次消息。等你打开第二个新标签页时，第一个标签页早已完成加载、监听器处于生效状态，反而能收到给第二个标签页发送的消息，就出现了你描述的现象。
另外你原有代码还存在一个隐患：BroadcastChannel实例写在组件渲染层，每次组件重渲染都会新建一个频道实例，会导致重复监听、内存泄漏问题。

方案1：通过就绪信号校准时序（适合数据量大、需要后续跨标签页通信的场景） #

核心逻辑是新标签页完成初始化、绑定好监听后，主动向频道发送就绪通知，原页面收到通知后再把要传递的数据发出去。

原页面（按钮所在页面）代码 #

const channel = new BroadcastChannel('color');
// 暂存待发送的数据
let pendingData = null;

const handleClick = () => {
  pendingData = 'GREEEENNNNNNNNN';
  // 打开新标签页
  window.open('/your-new-tab-path');
}

// 监听新页面的就绪信号
channel.onmessage = (e) => {
  if (e.data === 'TAB_READY' && pendingData) {
    channel.postMessage(pendingData);
    // 发送完成后清空暂存
    pendingData = null;
  }
}

新标签页代码 #

const [color, setColor] = React.useState('');

React.useEffect(() => {
  // 在effect中创建频道实例，避免重复渲染时重复创建
  const channel = new BroadcastChannel('color');
  
  channel.onmessage = (e) => {
    // 过滤掉自己发的就绪信号
    if (e.data !== 'TAB_READY') {
      setColor(e.data);
      console.log('color <========', e.data);
    }
  };

  // 监听绑定完成后，立刻发送就绪通知
  channel.postMessage('TAB_READY');

  // 组件卸载时关闭频道，清理内存
  return () => channel.close();
}, []);

方案2：URL参数传值（适合简单数据传递场景，无时序问题） #

如果传递的数据不涉及敏感信息、数据量较小，直接通过URL查询参数传递是最简单的方案，完全不需要处理通信时序问题。

原页面点击逻辑 #

const handleClick = () => {
  const targetUrl = new URL('/your-new-tab-path', window.location.origin);
  targetUrl.searchParams.set('color', 'GREEEENNNNNNNNN');
  window.open(targetUrl);
}

新标签页取值逻辑 #

const [color, setColor] = React.useState('');

React.useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const colorVal = params.get('color');
  if (colorVal) {
    setColor(colorVal);
    console.log('color <========', colorVal);
  }
}, []);

• BroadcastChannel 没有消息持久化能力，不会为晚加入的监听者缓存历史消息，所有跨标签页实时通信都需要考虑时序对齐问题。
• 包含事件监听、长连接的副作用逻辑统一放到React的useEffect中处理，记得在effect的return函数中做清理，避免内存泄漏和重复绑定问题。

内容的提问来源于stack exchange，提问作者Andrew Losseff