React中监听beforeunload事件时页面刷新前Hook状态被置空，无法自动关闭弹出窗口的问题

问题分析 #

你遇到的核心问题主要有两个：

1. 闭包陷阱导致无法获取最新状态
   你给beforeunload绑定的回调函数是在依赖为空的useEffect中创建的，这个回调会捕获组件挂载时的newWindow和newRoot状态（也就是初始的null）。后续即使你通过setNewWindow/setNewRoot更新了状态，这个回调里的变量依然是旧值，所以判断条件newRoot != null和newWindow != null永远不成立，自然无法执行关闭窗口和卸载根实例的操作。
2. 浏览器beforeunload事件的安全限制
   正如你查到的文档所说，现代浏览器对beforeunload事件有严格的安全限制：它主要用于触发用户确认导航的弹窗，而不是执行自动操作（比如关闭其他窗口）。很多浏览器会限制在这个事件中执行非用户触发的窗口操作，避免恶意网站滥用。

解决方案 #

针对这两个问题，我们可以通过以下方式调整代码：

1. 用useRef存储窗口和根实例的最新引用 #

useRef的current属性是可变的，不会被闭包捕获旧值，能让beforeunload回调随时拿到最新的窗口和根实例。

2. 调整beforeunload的回调逻辑 #

确保回调能访问到最新的实例，同时处理浏览器的安全限制（比如有些浏览器需要你返回一个字符串来触发确认弹窗，之后再尝试关闭窗口）。

修改后的完整代码示例 #

import { useState, useRef, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import { Box } from '@react-three/drei';

export function PopUp() {
  // 用useState管理按钮状态（控制显示文本）
  const [isWindowOpen, setIsWindowOpen] = useState(false);
  // 用useRef存储最新的窗口和根实例
  const newWindowRef = useRef(null);
  const newRootRef = useRef(null);
  const containerRef = useRef(null);

  const openPopout = () => {
    if (!isWindowOpen) {
      const newWin = window.open('', '_blank', 'width=800,height=600');
      if (newWin) {
        // 创建容器并挂载React根
        const containerDiv = newWin.document.createElement('div');
        containerDiv.id = 'root';
        newWin.document.body.appendChild(containerDiv);
        containerRef.current = containerDiv;
        
        const newRooty = createRoot(containerDiv);
        newRootRef.current = newRooty;
        newWindowRef.current = newWin;
        setIsWindowOpen(true);

        // 渲染内容到新窗口
        newRooty.render(
          <>
            <Canvas>
              <Box position={[1.2, 0, 0]} />
            </Canvas>
          </>
        );

        // 监听新窗口的关闭事件，同步更新主页面状态
        newWin.addEventListener('beforeunload', () => {
          handleClose();
        });
      }
    } else {
      handleClose();
    }
  };

  const handleClose = () => {
    // 卸载根实例并关闭窗口
    if (newRootRef.current) {
      newRootRef.current.unmount();
      newRootRef.current = null;
    }
    if (newWindowRef.current) {
      newWindowRef.current.close();
      newWindowRef.current = null;
    }
    containerRef.current = null;
    setIsWindowOpen(false);
  };

  // 监听主页面的刷新/导航事件
  useEffect(() => {
    const unloadCallback = (event) => {
      // 尝试关闭弹出窗口
      if (newWindowRef.current) {
        // 有些浏览器需要先触发确认弹窗（根据安全规则）
        event.preventDefault();
        event.returnValue = ''; // 触发默认的确认提示
        // 关闭窗口（部分浏览器可能允许在用户确认后执行）
        handleClose();
      }
    };

    window.addEventListener('beforeunload', unloadCallback);
    // 额外监听pagehide事件，处理移动端或某些浏览器的页面卸载
    window.addEventListener('pagehide', handleClose);

    return () => {
      window.removeEventListener('beforeunload', unloadCallback);
      window.removeEventListener('pagehide', handleClose);
    };
  }, []);

  return (
    <>
      <button className="XL" onClick={openPopout}>
        {isWindowOpen ? "Close Pop-Up" : "Open Pop-up"}
      </button>
    </>
  );
}

关键优化点说明 #

• 分离状态与引用：用useState管理isWindowOpen来控制按钮文本，用useRef存储窗口和根实例的最新引用，避免闭包陷阱。
• 监听新窗口的关闭事件：当用户手动关闭弹出窗口时，同步更新主页面的状态，避免状态不一致。
• 多事件兼容：同时监听beforeunload和pagehide事件，覆盖更多浏览器场景（比如移动端的页面切换）。
• 安全规则适配：在beforeunload中设置event.returnValue触发确认弹窗，部分浏览器会在用户确认后允许执行关闭窗口的操作。

注意事项 #

• 部分现代浏览器（如Chrome）可能会限制在beforeunload中自动关闭窗口，因为这属于非用户触发的操作，违反安全策略。这种情况下，你可以在确认弹窗中提示用户手动关闭弹出窗口，或者在用户确认导航后再尝试关闭。
• 确保在组件卸载时也执行handleClose，避免内存泄漏，比如在组件的清理函数中调用handleClose。

内容来源于stack exchange