反应 |如何检测页面刷新 (F5)

Question

我正在使用React js。我需要检测page refresh。当用户点击刷新图标或按 F5 时，我需要找出事件。

我通过使用 javascript 函数尝试了 stackoverflow post

我使用了 javascript 函数 beforeunload 仍然没有运气。

onUnload(event) { 
  alert('page Refreshed')
}

componentDidMount() {
  window.addEventListener("beforeunload", this.onUnload)
}

componentWillUnmount() {
   window.removeEventListener("beforeunload", this.onUnload)
}

这里有完整的代码 stackblitz

Answer 1

把这个放在构造函数中：

if (window.performance) {
  if (performance.navigation.type == 1) {
    alert( "This page is reloaded" );
  } else {
    alert( "This page is not reloaded");
  }
}

它会起作用，请在stackblitz 上查看此示例。

Answer 2

如果您正在使用 React Hook，UseEffect 您可以将以下更改放入您的组件中。它对我有用

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);
  const alertUser = (e) => {
    e.preventDefault();
    e.returnValue = "";
  };

Answer 3

您的代码似乎运行良好，但您的警报将不起作用，因为您没有停止刷新。如果你console.log('hello') 会显示输出。

更新---

这应该会停止用户刷新，但这取决于您想要发生的事情。

componentDidMount() {
    window.onbeforeunload = function() {
        this.onUnload();
        return "";
    }.bind(this);
}

Answer 4

不幸的是，由于 performance.navigation.type 是 deprecated

，因此当前接受的答案不能被认为是可以接受的

最新的 API 是实验性 ATM。 作为一种解决方法，我只能建议在 redux（或您使用的任何东西）存储中保存一些值以指示重新加载后的状态，并在第一次路由更改时更新它以指示路由更改不是因为刷新。

Answer 5

实际上很简单，每当您重新加载页面时，这都会添加默认警报。

功能组件

useEffect(() => {
    window.onbeforeunload = function() {
        return true;
    };

    return () => {
        window.onbeforeunload = null;
    };
}, []);

类组件

componentDidMount(){
    window.onbeforeunload = function() {
        return true;
    };
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

---

您可以将验证设置为仅在条件为true 时添加警报。

功能组件

useEffect(() => {
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }

    return () => {
        window.onbeforeunload = null;
    };
}, [condition]);

类组件

componentDidMount(){
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

Answer 6

如果您使用的是 REDUX 或 CONTEXT API，那么这很容易。您可以检查 REDUX 或 CONTEXT 状态变量。当用户刷新页面时，它会重置 CONTEXT 或 REDUX 状态，您必须再次手动设置它们。因此，如果它们没有设置或等于您给定的初始值，那么您可以假设页面已刷新。