如何使用Hooks阻止React组件被销毁/卸载？

首先明确结论：React没有提供任何可以直接中断组件卸载流程的API或Hook，useEffect的清理函数是组件确认进入卸载阶段后才会执行的钩子，此时卸载流程已经无法停止，你在清理函数中返回任意值都不会生效。

以下是可实现同等需求的常用技巧：

• 方案1：将卸载控制权上移到上层逻辑 #

  组件是否卸载本质是由上层渲染逻辑决定的：比如父组件{show && <Child />}的写法，当show变为false时Child才会卸载。你可以把“是否允许卸载”的判断逻辑放到修改show的触发位置，而不是等Child要卸载了再拦截。
  示例场景：用户点击关闭弹窗时，先判断是否有未保存内容，如果有则弹出二次确认，用户确认后再修改show为false，从源头避免不必要的卸载触发。

• 方案2：用CSS隐藏替代卸载 #

  如果你的核心需求是保留组件状态、不想重复初始化，不需要真的把组件从DOM移除，可以用CSS隐藏代替条件渲染卸载：

  <div style={{display: shouldShow ? 'block' : 'none'}}>
    <Child />
  </div>
  

  这种方案下组件始终不会卸载，所有内部状态都会完整保留，完全可以通过变量控制显隐，适合临时切换、需要保留操作进度的场景。

• 方案3：针对页面/路由离开场景的拦截 #

  如果你的需求是拦截浏览器页面关闭/刷新、路由跳转导致的组件卸载，可以用对应API实现：

  1. 浏览器页面离开拦截：监听beforeunload事件

  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (hasUnsavedChanges) { // 替换为你自己的判断条件
        e.preventDefault();
        e.returnValue = '您有未保存的内容，确定要离开吗？';
        return e.returnValue;
      }
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [hasUnsavedChanges]);
  

  2. 路由跳转拦截：如果你使用React Router这类路由库，直接调用框架提供的跳转拦截API即可，比如React Router v6的useBlocker、useBeforeUnload Hook，可以在路由跳转前触发二次确认，用户同意后才会跳转卸载当前页面组件。

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