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

Question

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

我尝试使用 javascript 函数使用stackoverflow 帖子

我使用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 已弃用，因此目前接受的答案不能被认为是可以接受的

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

Answer 5

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

在这个答案中，您会发现：

1. 默认用法
2. 带有验证的警报

1. 默认用法

功能组件

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

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

类组件

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

componentDidUnmount(){
    window.onbeforeunload = null;
}

---

2. 带有验证的警报

您可以将验证设置为仅在条件为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 状态，您必须再次手动设置它们。 因此，如果它们未设置或等于您给出的初始值，那么您可以假设页面已刷新。