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

Posted 2023-02-21

【中文标题】反应 |如何检测页面刷新 (F5)

【英文标题】：React | How to detect Page Refresh (F5)

【发布时间】：2018-10-06 03:39:11

【问题描述】：

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

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

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

onUnload(event)  
  alert('page Refreshed')


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


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

这里有完整的代码 stackblitz

【问题讨论】：

为什么不直接检查e.keyCode === 116，它是F5 键？以下是如何做到这一点的示例：***.com/a/34634290/2127769

浏览器刷新按钮点击和F5按下可能有两种情况

您的代码运行良好

【参考方案1】：

把这个放在构造函数中：

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

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

【讨论】：

但是有问题。即使页面更改，它也会被触发。不仅页面刷新。我只需要刷新页面

只改变条件的内容

我正在使用反应路由器。当我切换菜单时它被触发了

请看提示文字，如果页面刷新会触发提示“此页面已重新加载”，否则会触发另一个提示“此页面未重新加载”。所以你可以只使用第一个条件

@MariaJeysinghAnbu 说它会触发刷新警报，即使在 IE 中更改了路线。在 IE 中，即使用户更改路由，它的值也是 1，但在 chrome 中它的工作方式不同

【参考方案2】：

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

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

【参考方案3】：

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

更新---

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

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

【讨论】：

我可以调用onUnload 函数中的任何函数吗？因为我试过它似乎不起作用。

您需要提示用户停止刷新。您要在onUnload 中放置什么功能？我会用一个例子来更新我的答案。

只有在页面刷新时我必须调用这样的函数this.props.actions.loaddata()

谢谢。我认为，它已在页面加载之前被调用。我需要用户刷新页面后

Abdellatif 似乎有比我更好的解决方案。

【参考方案4】：

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

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

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

【讨论】：

不认为 redux 在浏览器刷新后幸存下来

不是，但可以通过设置一些全局状态标志来识别路由变化。如果 flag 有默认值，则表示我们在刷新后处于状态，否则是路由变化。

【参考方案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;

【讨论】：

如何在 react.js 类组件中使用这段代码？

@Mayur Vaghasiya，您可以将componentDidMount 和componentDidUnmount 函数用于类组件。我的useEffect 上的一个是componentDidMount，我的useEffect 上的一个是componentDidUnmount。稍后我有时间会编辑我的答案。

有什么办法可以修改重载后出现的提示信息？

【参考方案6】：

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

【讨论】：

最初我发现这种方法很有用，但后来我发现它为我创建了一个错误，所以现在我正在做的是从我的 componentDidMount 将一个名为 currentPage 的字符串 prop 存储在我的一个 redux 减速器中但在设置之前检查它的值，以确保前一页是不同的页面，而不是简单的重新加载。时间会证明这是否是一个好方法