React中componentWillUnmount打开自定义确认框延迟卸载组件问题

componentWillUnmount 是组件卸载流程的最后阶段，React 不会在这个阶段等待任何异步逻辑，也不存在可阻断卸载的API。给componentWillUnmount加async关键字没有任何作用，React不会等待异步函数执行完成，卸载流程会同步走完，此时调用setState不会触发重新渲染，组件会直接完成卸载，自定义弹窗自然无法正常显示。
之前用window.confirm能生效是因为它是浏览器原生同步阻塞API，会直接暂停JS线程执行，和React渲染流程无关，基于React状态驱动的自定义弹窗完全不具备这个能力，放在componentWillUnmount里不可能正常运行。

所有离开确认逻辑必须前置到卸载触发前执行，不能等进入卸载流程再处理，按常见的离开场景分别处理即可：

• 路由跳转离开场景：使用对应路由库提供的导航拦截能力，在路由即将跳转、组件仍正常挂载时拦截导航，此时可以正常通过状态控制打开自定义Dialog：
  • 用户选择保存：执行完保存逻辑后，手动放行导航、完成跳转
  • 用户选择不保存/取消：直接放行导航，或者关闭弹窗留在当前页面
    以React Router v6为例可以直接使用useBlocker钩子实现拦截，类组件可以通过高阶组件封装该逻辑后使用。
• 父组件控制卸载场景：不要让父组件直接触发组件卸载，新增前置关闭回调做中转：
  1. 父组件要关闭当前组件时，不直接修改挂载状态，先调用当前组件暴露的onBeforeClose方法
  2. 当前组件在onBeforeClose中检测未保存改动：
     • 无改动：直接通知父组件可以正常卸载
     • 有改动：通过setState打开自定义Dialog，等待用户操作后再通知父组件是否执行卸载
• 浏览器刷新/关闭标签页场景：这个场景受浏览器安全限制，无法弹出自定义Dialog，只能通过监听beforeunload事件触发浏览器原生提示，没有绕过方案。

componentWillUnmount 只适合做清除定时器、取消未完成请求、解绑全局事件这类同步清理操作，不适合放任何需要等待用户交互、阻塞流程的逻辑，原有写在该钩子里的弹窗触发代码可以直接删除。

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