JS/React 的类似 ViewDidAppear 的方法？

Question

比如说，有两个选项卡打开了同一个网页。 在一个选项卡上，我在 localStorage 中做了一些更改，然后，当我转到另一个选项卡时，我希望看到更改而无需重新加载页面。

我想到的一种方法是使用 setInterval 方法，但对于我的应用程序，我真的不需要每 3-5 秒检查一次更新，所以我不觉得这种方法是理想的。

我正在使用 React。 TLDR：有什么好的方法可以在我打开之前加载的网页的选项卡时立即更新数据？

iOS 人的旁注：在 iOS 上，有一个 viewDidLoad 方法（根据我的理解，它类似于 componentDidMount），并且有一个viewDidAppear 方法（所以我基本上是在询问 viewDidAppear 的 React/JS 版本？）

关于可能重复的问题：对我来说，这似乎很不一样，这个问题更 React.js 重点。

Answer 1

您可以使用 jQuery 并监听 localStorage on-change 事件：

 $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });

这样，一旦本地存储中的某个键发生变化，您可以在第二个选项卡中反映出来。

如果您使用的是 React，请确保您在主组件的 render() 函数中渲染一个组件，该组件使用了主组件的 state 对象。本地存储更改后，相应地更新 state，React 将处理其余部分。

Answer 2

使用页面可见性 api 或只是 window 的焦点事件。我建议将备用计时器设置为一分钟左右...这些事件可能很挑剔。

除了binding to global events以外，没有什么特别的反应。

Answer 3

我在我的主要组件中添加了以下代码行。

在 componentDidMount:

document.addEventListener("visibilitychange", this._callbackFunc, false);

在 componentWillUnmount:

document.removeEventListener("visibilitychange", this._callbackFunc, false);

ViewDidAppear-Like Method For JS/React?