当用户关闭网页时，有没有办法让 useEffect 清理运行？答案

【问题标题】：Is there a way to get a useEffect cleanup to run when a user closes the webpage?当用户关闭网页时，有没有办法让 useEffect 清理运行？
【发布时间】：2021-12-12 21:57:11
【问题描述】：

因此，出于某种原因，如果我想在用户离开页面时运行一个函数来更新数据库，我可以使用 useEffect 返回/清理函数来实现。但是，如果他们关闭页面/浏览器，有没有办法做到这一点？

  useEffect(() => {
    return () => {
      window.open("https://www.google.com", "_blank");
    };
  }, []);

我尝试过这样的测试，但似乎从来没有奏效。所以我想知道是否有办法做到这一点。

【问题讨论】：

关闭浏览器不会立即停止 JavaScript 吗？
@darthzeran, onBeforeUnload 可能就是你要找的东西
@NicholasTower，我将如何在反应中使用 onBeforeUnload？我尝试将它们放在 useEffect 中，但是当我关闭选项卡时，我的警报或日志或在新选项卡中打开都不会触发

标签： reactjs use-effect

【解决方案1】：

要在窗口即将关闭时收到通知，请使用onbeforeunload 事件：

useEffect(() => {
  const onBeforeUnload = (e) => {
   // run your cleanup code here
  }
  window.addEventListener('beforeunload', onBeforeUnload);
  return () => {
    window.removeEventListener('beforeunload', onBeforeUnload);
  }
}, []);

在此活动期间，您可以做的事情是有限的。如果需要，您可以提示用户是否真的要关闭页面，您可以这样做：

const onBeforeUnload = (e) => {
  // Cancel the event
  e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
  // Chrome requires returnValue to be set
  e.returnValue = '';
}

这将显示一条类似警报的消息，您无法自定义。通常，只有当用户在他们期望收到此类消息的地方做了某些事情时，您才应该这样做。即，他们进行了更改，而这些更改尚未保存，如果丢失，他们会很生气。如果你只是运行清理代码，你可能不需要这样做。

您不能将它们重定向到另一个页面或显示自定义警报。恶意页面会喜欢这样：“哈哈，你试图离开我的页面，我正在将你转回它”。

【讨论】：

所以我在 onBeforeLoad 中放置了一个控制台日志、警报和一个 window.open，但是如果我关闭选项卡或单击将我带到另一个网站的链接，则什么也不会发生。还有其他一些我只是天真地想念的步骤吗？
如果您想打断用户（例如，因为他们有他们关心的未保存更改），您可以通过添加e.preventDefault() 和e.returnValue = "" 来显示确认提示。但是您不能进行重定向或自定义警报。并且您的 console.log 没有显示，因为该页面现在已关闭，因此没有可以查看它的控制台。