使用React Hooks与原生回调避免竞态条件的实现疑问

1. 消息响应是否可能在状态更新前到达？ #

完全有可能。setPendingMessageId是React的异步状态更新，React会将状态更新放入队列延迟处理；而frame.postMessage发送消息后，如果目标帧同步处理并立即回复（比如同域帧的处理逻辑极快），message事件会在React更新pendingMessageId状态之前触发，此时事件回调里的pendingMessageId还是旧值（undefined），导致无法匹配响应，错过回调触发。

2. 跨帧通信Hook的改进实现与最佳实践 #

针对你的代码问题，结合跨帧通信的最佳实践，给出以下改进方案：

核心问题修复与优化点 #

• 用useRef替代useState存储pending的消息ID：ref的更新是同步的，能确保事件回调访问到最新的ID值
• 避免全局messageId冲突：使用全局唯一的计数器生成逻辑，避免多组件实例互相干扰
• 发送消息时携带完整请求标识：将eventName和messageId一起发送给目标帧，确保对方能正确关联响应
• 稳定事件回调引用：用useRef存储最新的handler，避免因依赖变化频繁重建回调
• 清理事件监听：组件卸载时移除message事件监听，防止内存泄漏
• 验证消息来源：添加目标帧的origin和source校验，避免恶意消息干扰

改进后的Hook代码 #

import { useCallback, useRef, useEffect } from 'react';

// 全局唯一消息ID生成器
let globalMessageId = 0;

function usePostMessage(
  targetFrame: Window,
  targetOrigin: string,
  eventName: string,
  handler: (success: boolean) => void
) {
  const pendingMessageIdRef = useRef<number | undefined>(undefined);
  const handlerRef = useRef(handler);

  // 保持handler引用始终最新
  useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  const postMessage = useCallback(() => {
    const messageId = ++globalMessageId;
    // 发送包含事件名和消息ID的完整请求
    targetFrame.postMessage(
      { type: eventName, messageId },
      targetOrigin
    );
    // 同步更新ref，确保事件回调能立即拿到最新ID
    pendingMessageIdRef.current = messageId;
  }, [targetFrame, targetOrigin, eventName]);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // 校验消息来源，防止恶意请求
      if (event.source !== targetFrame || event.origin !== targetOrigin) {
        return;
      }

      const { type, messageId, success } = event.data;
      // 匹配事件名和当前pending的消息ID
      if (type === eventName && messageId === pendingMessageIdRef.current) {
        handlerRef.current(Boolean(success));
        // 重置pending状态
        pendingMessageIdRef.current = undefined;
      }
    };

    window.addEventListener('message', handleMessage);
    // 组件卸载时移除监听
    return () => window.removeEventListener('message', handleMessage);
  }, [targetFrame, targetOrigin, eventName]);

  // 导出pending状态供组件使用
  const isPending = pendingMessageIdRef.current !== undefined;
  return { postMessage, isPending };
}

使用示例 #

const targetFrame = document.getElementById('target-frame')?.contentWindow;
const targetOrigin = 'https://your-target-origin.com'; // 替换为实际目标帧的origin

const { postMessage, isPending } = usePostMessage(
  targetFrame!,
  targetOrigin,
  'eventName',
  (success) => {
    console.log('eventName', success ? 'succeeded' : 'failed');
  }
);

if (isPending) {
  return <div>Pending...</div>;
}

return <button onClick={postMessage}>Click me</button>;

额外最佳实践 #

• 严格校验消息来源：始终在message事件回调中校验event.source和event.origin，避免接收未知来源的消息
• 消息结构标准化：约定统一的消息格式（比如包含type、messageId、data、success等字段），便于双方解析
• 超时处理：添加超时逻辑，如果在指定时间内未收到响应，自动重置pending状态并触发失败回调
• 错误边界：在handler中添加try/catch，避免响应处理逻辑抛出错误影响组件
• 支持并发请求：如果需要同时处理多个请求，可以用ref存储多个pending的messageId和对应的handler，而非单个值

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