反应 |如何检测页面刷新（F5）

Question

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

我尝试使用 javascript 函数 Whosebug post

我用了javascript函数beforeunload还是不行。

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

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

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

这里我有 stackblitz

的完整代码

Answer 1

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

更新---

这应该会阻止用户刷新，但这取决于您想要发生什么。

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

Answer 2

将其放入构造函数中：

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

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

Answer 3

不幸的是，目前接受的答案不能被认为是可接受的，因为 performance.navigation.type 是 deprecated

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

Answer 4

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

Answer 5

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

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

Answer 6

它实际上非常简单，这将在您重新加载页面时添加默认警报。

功能组件

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

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

Class 组件

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

componentDidUnmount(){
    window.onbeforeunload = null;
}

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

功能组件

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

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

Class 组件

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

componentDidUnmount(){
    window.onbeforeunload = null;
}

反应 |如何检测页面刷新（F5）

React | How to detect Page Refresh (F5)

javascript

browser

page-refresh

reactjs

功能组件

Class 组件

功能组件

Class 组件