Reactjs 当页面可见时，如何重新运行useEffect？

使用挂钩的react应用程序。在

useffect

中，有一个api调用来填充页面上的内容。 获取的每个元素都可以单击。单击将在新的浏览器窗口/选项卡中打开已单击元素的详细信息

在新窗口中工作时，用户可以对该对象进行更改。然后，用户将关闭该选项卡，或者至少返回主窗口/选项卡

问题是如何检测用户是否返回主窗口。这是因为我想从API重新获取数据。因此，我想重新运行

useffect

。 在谷歌搜索时，我发现：

https://www.npmjs.com/package/react-page-visibility

这真的是我想要的吗？阅读文档我不确定这是否能解决我的问题。是否有其他方法解决此问题？

您可以使用此事件来实现：

const onVisibilityChange=（）=>{
如果（document.visibilityState=='visible'）{
log（“选项卡重新打开，重新读取数据！”）；
}
};
useLayoutEffect（（）=>{
文件。添加的文件列表（“visibilitychange”，onVisibilityChange）；
return（）=>document.removeEventListener（“visibilitychange”，onVisibilityChange）；
}, []);

---

我想是的。visibility API或window.blur/focus事件似乎是您想要的，而npm包似乎为前者实现了react包装器，因此它看起来是最优雅的。当然，“正确”的方法是在更改时从后端反应性地推送数据，然后在react中对新数据作出反应，这正是Meteor所做的，但我不认为您已经设置了任何这样的体系结构。只是把它放在那里，就可以立即进行“焦点重新验证”。@cbr，谢谢分享。是的，SWR是朝着正确的方向迈出的一步，但它仍然是基于轮询的，即即使没有任何更改，也会获取数据，而不是基于推送的，只在更改时向客户端发送数据。是的，OP所指的npm包也使用了这一点，并使其在react上下文中随时可用。