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

Question

所以出于某种原因，如果我想运行一个函数来在用户离开页面时更新数据库，我可以使用 useEffect return/cleanup 函数来实现。但是如果他们关闭 page/browser?

有没有办法做到这一点

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

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

Answer 1

要在 window 即将关闭时收到通知，请使用 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 = '';
}

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

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

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

Is there a way to get a useEffect cleanup to run when a user closes the webpage?

reactjs

use-effect

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

Is there a way to get a useEffect cleanup to run when a user closes the webpage?

reactjs

use-effect

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