React 组件上的 pageshow 事件侦听器无法正常工作答案

【问题标题】：pageshow's event listener on a React component not working properlyReact 组件上的 pageshow 事件侦听器无法正常工作
【发布时间】：2016-09-30 22:11:26
【问题描述】：

我有以下情况，我需要在第一次进入页面或从另一个页面返回时运行一些“代码”。

Safari 的缓存功能 (https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/) 导致了这种情况，因为它缓存我的页面而不执行任何操作。

我按照他们的建议为“pageshow”事件添加事件侦听器，这样我可以检查该事件是否持续存在，然后运行我需要的。

这个example 基本上是我想要的：

首页访问...附加监听器 = 酷，我有。
如果我离开页面并返回（使用 Safari），它会在 pageshow 上触发我的侦听器 = 酷，我有那个...几乎。
每次我导航回该页面时都应该触发监听器 = 不酷，我的监听器会触发一次。

我正在使用 react 和 componentDidMount() 是我准备一切的地方：

这是第一次工作。我可以离开我的页面并返回到它+执行我需要的内容。

问题是：第二次重复“离开我的页面并返回”不会做任何事情。看起来监听器被删除了。

【问题讨论】：

hte componentDidMount 不是已经为你做了吗？如果是我，我会忘记 eventListener 并让 react 组件在其 componentDidMount 中处理它。如果每次您离开并返回时都安装组件，这将起作用。 componentDidMount console.log 是否会在您每次离开和回来时显示？
由于 Safari 缓存的原因，我的组件生命周期事件中的任何代码（如 componentDidMount 等）都不会执行。这就是我必须附加事件侦听器的原因。
目前，如果 event.persisted 为真，我将强制重新加载页面。这样做一切都会执行（就像所有其他浏览器一样）。但我想保持 Safari 不重新加载整个页面的行为，这就是我添加事件监听器的原因。
出于安全原因，我们必须解决这个问题，我们只是在渲染 React 应用程序其余部分的顶级组件中添加 window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } };，但不确定这是否适用于您的情况

标签： javascript reactjs safari dom-events pageshow

【解决方案1】：

经过两天的尝试，我的同事让我尝试a listener on 'popstate'。我非常想让“pageshow”监听器工作，以至于我完全忘记了测试那个监听器。它完美地工作：

window.addEventListener('popstate', function(event) {

【讨论】：

你在哪里添加代码？我试着把它放在 componentDidMount 中，但仍然没有触发。
就像示例一样，但是我使用了“popstate”而不是“pages how”，但是是的......在componentDidMount中！已经有一段时间了.. 在 Safari 上总是会触发 popstate (developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…)