React严格模式下window.open双弹窗问题的合规解决方法（兼顾可恢复性）

React严格模式在开发环境中会重复执行副作用（包括useEffect的回调和清理函数），核心目的是检测副作用是否具备可恢复性——即组件卸载后重新挂载时，副作用能正确清理并重新执行，不会留下无效状态或重复执行不可逆操作。

对于window.open这种不可逆的用户可见操作，直接放在空依赖的useEffect里会触发两次弹窗。要兼顾React可恢复性要求，不能简单用ref绕过检测，而是要让逻辑适配严格模式的设计目标：

• 优先绑定到用户交互：浏览器通常会拦截非用户触发的自动弹窗，且从交互合理性来说，由用户主动操作（比如点击按钮）触发弹窗更符合体验规范。这种情况下严格模式不会重复执行事件处理函数，自然不会出现两次弹窗的问题。

• 若必须自动触发，用可追踪状态控制执行逻辑：
  使用useRef标记弹窗是否已执行，同时保留清理函数以保证可恢复性——当组件模拟卸载-重新挂载时，清理函数会重置标记，确保组件真正重新挂载时能正确执行逻辑：

  const hasOpenedRef = useRef(false);
  
  useEffect(() => {
    if (!hasOpenedRef.current) {
      window.open(...);
      hasOpenedRef.current = true;
    }
    // 清理函数：模拟卸载时重置标记，保证组件重新挂载时的可恢复性
    return () => {
      hasOpenedRef.current = false;
    };
  }, []);
  

  这里的useRef不是用来绕过严格模式，而是让副作用在生命周期变化中能正确重置状态，符合组件挂载-卸载-重新挂载的预期行为。

• 不推荐直接区分开发/生产环境：通过环境变量跳过开发环境的重复执行会掩盖严格模式想要检测的潜在问题，违背其设计初衷。

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