React中使用iframe是否会引发内存泄漏？

问题现象 #

• 原生H5页面：嵌入的iframe创建WebSocket连接时，Time值显示为Pending；移除iframe后，Time值自动更新为连接持续时长。
• React页面：添加iframe后WebSocket连接处于Pending状态，但移除iframe后，Time值仍保持Pending，尽管WebSocket服务器日志显示连接已断开。

提供的React代码 #

function App() {
  const [frames, setFrames] = useState([]);

  const onAdd = useCallback(() => {
    const iFrame = (
      <iframe src='http://127.0.0.1:8080/iframe.html' />
    );

    setFrames((frames) => [
      ...frames,
      iFrame,
    ]);
  }, []);

  const onDel = useCallback(() => {
    setFrames((frames) => [
      ...frames.slice(0, frames.length - 1),
    ]);
  }, []);

  return (
    <div className="App">
      <div>
        <button onClick={onAdd}>+1</button>
        <button onClick={onDel}>-1</button>
      </div>
      <div>
        {
          frames.map((frame, index) => {
            return (
              <React.Fragment key={index}>
                {frame}
              </React.Fragment>
            )
          })
        }
      </div>
    </div>
  );
}

原因分析 #

这不是内存泄漏，核心问题出在React的虚拟DOM机制以及你存储JSX元素的方式上：

1. 原生H5的逻辑：直接操作DOM删除iframe节点时，浏览器会立即销毁iframe的运行上下文，触发iframe内部的unload等生命周期事件，WebSocket相关的状态监听逻辑会正常执行，从而更新Time值。
2. React中的问题：你在frames状态中存储的是JSX元素而非DOM节点引用。当调用setFrames移除元素时，React会异步更新虚拟DOM并移除对应的iframe DOM节点，但iframe内部的页面可能还未完全卸载，且没有主动触发状态更新逻辑——React不会自动帮你清理iframe内部的资源，导致iframe里的Time状态无法同步更新。

另外，使用index作为元素key的做法存在隐患，当数组元素变化时，React可能无法正确识别元素的增删，不过这不是本次问题的核心原因。

解决方案 #

1. 调整React代码：存储标识而非JSX元素 #

不要在state里直接存<iframe>元素，改用唯一标识数组，渲染时动态生成iframe，这样可以在删除时主动获取DOM节点并触发清理：

function App() {
  const [frameIds, setFrameIds] = useState([]);

  const onAdd = useCallback(() => {
    setFrameIds(prev => [...prev, Date.now()]); // 用时间戳作为唯一ID
  }, []);

  const onDel = useCallback(() => {
    if (frameIds.length === 0) return;
    const lastId = frameIds[frameIds.length - 1];
    const iframe = document.getElementById(`iframe-${lastId}`);
    
    if (iframe) {
      // 主动通知iframe内部清理WebSocket并更新状态
      iframe.contentWindow.postMessage('closeWebSocket', 'http://127.0.0.1:8080');
      // 立即关闭iframe上下文，加速资源回收
      iframe.contentWindow.close();
    }
    
    setFrameIds(prev => prev.slice(0, -1));
  }, [frameIds]);

  return (
    <div className="App">
      <div>
        <button onClick={onAdd}>+1</button>
        <button onClick={onDel}>-1</button>
      </div>
      <div>
        {frameIds.map(id => (
          <iframe 
            key={id} 
            id={`iframe-${id}`}
            src='http://127.0.0.1:8080/iframe.html' 
          />
        ))}
      </div>
    </div>
  );
}

2. 在iframe页面中添加状态同步逻辑 #

在iframe.html的脚本中，监听消息事件和卸载事件，主动处理WebSocket断开与状态更新：

// iframe内部脚本示例
let ws = null;
let connectTime = 0;
const timeElement = document.getElementById('time');

// 初始化WebSocket
function initWebSocket() {
  connectTime = Date.now();
  timeElement.textContent = 'Pending';
  ws = new WebSocket('ws://your-server-url');
  
  ws.onclose = () => {
    timeElement.textContent = `${Date.now() - connectTime}ms`;
  };
}

// 监听来自父页面的关闭指令
window.addEventListener('message', (e) => {
  if (e.origin === 'http://localhost:3000' && e.data === 'closeWebSocket') {
    ws?.close();
  }
});

// 监听iframe卸载事件，确保状态更新
window.addEventListener('unload', () => {
  ws?.close();
});

initWebSocket();

总结 #

该差异是React虚拟DOM异步更新机制与原生DOM直接操作的逻辑差异导致的，并非内存泄漏——服务器日志已显示连接断开，只是iframe内部的状态未及时同步。通过主动触发iframe内部的资源清理逻辑，即可解决状态显示异常的问题。

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