用户关闭网页或浏览器时能否触发React useEffect清理函数执行？

React useEffect 清理函数仅在组件正常卸载场景下触发，比如路由切换、条件渲染隐藏组件等逻辑触发的组件销毁。如果用户直接关闭标签页、关闭浏览器、刷新页面，浏览器会直接销毁整个页面上下文，不会等待 React 生命周期执行，因此清理函数不会被触发，这是你测试代码不生效的核心原因。

可行实现方案 #

要覆盖页面直接关闭的场景，需要监听浏览器原生的 beforeunload 事件，配合 Navigator.sendBeacon API 保证请求的送达率，具体注意事项和实现如下：

• 不要用普通的 Ajax/fetch 发送更新请求：页面卸载时异步请求会被浏览器直接中断，成功率极低
• 优先使用navigator.sendBeacon：这是浏览器专门为页面卸载阶段的数据上报设计的API，异步执行、不阻塞页面关闭，浏览器会尽量保证请求发送完成
• 卸载阶段触发的window.open、弹窗等操作会被浏览器的安全策略拦截，不要用这类逻辑做功能验证，建议用接口请求日志、本地日志输出验证

示例实现代码 #

useEffect(() => {
  // 页面关闭/刷新时触发的处理函数
  const handlePageUnload = () => {
    // 构造需要更新到数据库的参数
    const updateData = JSON.stringify({
      // 替换为你的业务参数
      userId: "123",
      lastOperateTime: Date.now()
    })
    // 发送请求，第一个参数替换为你的后端更新接口地址
    navigator.sendBeacon(
      "/api/update-user-status",
      new Blob([updateData], { type: "application/json" })
    )
  }

  // 绑定卸载事件
  window.addEventListener("beforeunload", handlePageUnload)

  return () => {
    // 组件正常卸载（路由跳转等场景）时也执行更新逻辑，覆盖全场景
    const updateData = JSON.stringify({
      userId: "123",
      lastOperateTime: Date.now()
    })
    navigator.sendBeacon(
      "/api/update-user-status",
      new Blob([updateData], { type: "application/json" })
    )
    // 解绑事件避免内存泄漏
    window.removeEventListener("beforeunload", handlePageUnload)
  }
}, [])

额外注意事项 #

• 该方案无法做到100%触发：部分移动端浏览器、极端场景（比如浏览器进程直接被杀死、设备断电）下beforeunload不会触发，核心业务数据建议在用户操作过程中实时增量保存，不要完全依赖页面卸载事件更新
• 如果需要给用户弹出离开确认提示，只需要在handlePageUnload函数中新增e.returnValue = "您的修改尚未保存，确认离开吗？"即可

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