BrowserRouter应用页面刷新时componentWillUnmount钩子不触发问题咨询

• componentWillUnmount 属于React组件树内部的生命周期钩子，触发前提是React能完整感知到组件从渲染树中被移除的过程：比如路由切换时旧组件被摘除、条件渲染移除节点、手动调用ReactDOM.unmountComponentAtNode销毁整个React应用这类场景。
• 页面刷新、关闭标签页、跳转外部链接这类浏览器级别的页面卸载动作，会直接销毁当前页面的全部JS执行上下文，清空所有等待执行的JS任务队列，根本不会给React预留调度、执行组件卸载生命周期的时间，因此顶层AppRouter的componentWillUnmount逻辑完全不会被触发。

注意：不要将React顶层组件的生命周期和浏览器的页面卸载流程做绑定，两者的触发机制完全不在同一层级，不存在互通的触发通道。

• 改用浏览器原生的页面卸载事件实现持久化逻辑，替代React生命周期：
  • 常用的可监听事件为beforeunload、pagehide，其中pagehide在移动端浏览器、SPA前进后退缓存场景下的兼容性表现更稳定
  • 实现时需要在组件挂载阶段绑定事件监听，在组件从React树正常卸载时解绑，避免内存泄漏
    适配后的参考代码：

  export default class AppRouter extends Component {
    handlePageUnload = () => {
      localStorage.setItem('flag', `${Math.random()}：App is unload`)
    }
  
    componentDidMount() {
      window.addEventListener('beforeunload', this.handlePageUnload)
      window.addEventListener('pagehide', this.handlePageUnload)
    }
  
    componentWillUnmount() {
      // 解绑全局事件，避免内存泄漏
      window.removeEventListener('beforeunload', this.handlePageUnload)
      window.removeEventListener('pagehide', this.handlePageUnload)
      // 保留React树主动卸载场景下需要执行的逻辑
    }
  
    render() {
      return (
        <BrowserRouter>
            <App>
                <Switch>
                    <Route path='/home' exact component={Home}></Route>
                </Switch>
            </App>
        </BrowserRouter>
      )
    }
  }
  

• 注意执行约束：页面卸载阶段的浏览器执行机制有严格限制，回调中不要放置异步逻辑、耗时网络请求。localStorage的写入是同步API，完全适配这个场景。如果需要在页面卸载时发送网络请求，需使用navigator.sendBeacon这类专门为卸载场景设计的低优先级API，避免请求被浏览器中断。
• 双场景覆盖：保留原有componentWillUnmount中针对React树主动卸载（比如手动销毁React应用、路由跳转导致的顶层组件移除）的逻辑，和浏览器原生的页面卸载事件形成互补，覆盖所有卸载场景。

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