react js：检测页面刷新答案

【问题标题】：react js : detect page refreshreact js：检测页面刷新
【发布时间】：2018-05-02 06:55:56
【问题描述】：

我是 react.js 的新手。我有一个带表格的简单页面。当我重新加载页面时，状态正在丢失。有没有办法检测浏览器刷新？

【问题讨论】：

单页应用不应该重新加载整个页面，如果你不想硬重置你的状态。
它不是单页应用。
@learning_vba 你的MainHandler.js 中不需要renderTable();，因为这将由Dashboard.js 独立处理。
事情是我不想改变现有的逻辑。有没有办法检测浏览器刷新？

【解决方案1】：

使用 [react-beforeunload][1] 您可以轻松跟踪页面更改

import { useBeforeunload } from 'react-beforeunload'
const App = () => {
  const [preventMultiSubmit, setPreventMultiSubmit] = useState(false)
}
 const pageRefConf = useBeforeunload((event) => {
    if (preventMultiSubmit) {
      event.preventDefault()
    }
  })
  useEffect(() => {
    window.addEventListener('beforeunload', pageRefConf)
    return () => {
      window.removeEventListener('beforeunload', pageRefConf)
    }
  }, [])

这对我有用。我希望这个也对你有用。 [1]：https://www.npmjs.com/package/react-beforeunload

【讨论】：

【解决方案2】：

事件beforeunload 在窗口浏览器刷新之前执行。活动可取消。

window.beforeunload = (e) => {
  console.log('Stop this');
  e.preventDefault()
  e.returnValue = '';
};

当使用 React 时，一个选项是在 @georgim 建议的 componentDidMount 生命周期方法中控制您的应用程序组件或最高阶组件，而不是像我最初建议的那样 componentWillUnmount，并在那里管理您想要的去实现。

【讨论】：

对于顶级组件中的componentDidMount你怎么看？（检测重新加载）
@giorgim 我一直在尝试，此外最好使用beforeunload事件监听器，确实应用componentDidMount中的逻辑更可靠。

【解决方案3】：

试试这个。这对我有用。

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

【讨论】：

此 API 已弃用