如何创建一个 React hook 来检测页面刷新一次并在后续安装时返回 false？

Question

我正在尝试创建一个 React hook 来检测用户是否刚刚刷新页面。仅在页面刷新后的第一次交互时，挂钩才应返回

true

。在后续安装或交互中，只要用户不再刷新页面，它就应该返回

false

。

我尝试使用

performance.getEntriesByType('navigation')

方法来检测页面是否重新加载，然后使用

performance.clearResourceTimings()

清除性能条目。然而，这种方法并没有达到预期的效果。挂钩在后续安装时仍返回

true

，这不是所需的行为。

我需要一种解决方法或不同的方法来确保钩子在页面刷新后仅返回一次 true ，并在所有后续安装中返回 false ，直到下一个页面刷新。

import {useEffect} from 'react';
import {Platform} from 'react-native';

type UseDetectPageRefreshProps = {
    wasPageRefreshed: boolean;
};

function useDetectPageRefresh(): UseDetectPageRefreshProps {
    if (Platform.OS !== 'web') {
        return {wasPageRefreshed: false};
    }
    const isRefreshed = performance
        .getEntriesByType('navigation')
        .map((nav) => (nav as PerformanceNavigationTiming).type)
        .includes('reload');

    console.log('Page refresh detected:', isRefreshed);

    useEffect(() => {
        const resetRefreshStatus = () => {
            console.log('Resetting refresh status');
            // TODO: Clear performance entries navigation type to avoid false positives on future checks
        };

        if (isRefreshed) {
            resetRefreshStatus();
        }
    }, [isRefreshed]);

    return {wasPageRefreshed: isRefreshed};
}

export default useDetectPageRefresh;

我正在寻找一种解决方案，确保钩子在页面刷新后仅立即返回 true 一次，并在所有后续安装或交互中返回 false，直到下一个页面刷新。任何有关如何实现这一目标的帮助或指导将不胜感激。谢谢！

Answer 1

跟踪刷新次数似乎会很有帮助。窗口的 localStorage 属性允许您访问存储对象，并且存储的数据跨浏览器会话保存。

  if (isRefreshed) {
    localStorage.setItem(
      'refreshCount',
      Number(localStorage.refreshCount || 0) + 1
    );
  }

  return { wasPageRefreshed: Number(localStorage.refreshCount) === 1 };