reactjs - 页面可见时如何重新运行useEffect？

Question

一个使用钩子(Hook)的 react 应用程序。在 useEffect有一个 api 调用来填充页面上的内容。
获取的每个元素都是可点击的。单击将在新的浏览器窗口/选项卡中打开单击元素的详细信息。
在新窗口中工作时，用户可以对该对象进行更改。然后，用户将关闭该选项卡，或者至少只是返回主窗口/选项卡。
问题是我如何检测到用户正在返回主窗口。这是因为我想从 API 重新获取数据。因此，我想重新运行 useEffect .
在谷歌搜索时，我发现了这个:

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

这真的是我要找的吗？阅读文档我不确定这是否可以解决我的问题。还有其他方法可以解决这个问题吗？

Answer 1

您可以使用 visibilitychange实现这一目标的事件:

const onVisibilityChange = () => {
  if (document.visibilityState === 'visible') {
    console.log("Tab reopened, refetch the data!");
  }
};

useLayoutEffect(() => {
  document.addEventListener("visibilitychange", onVisibilityChange);

  return () => document.removeEventListener("visibilitychange", onVisibilityChange);
}, []);

Codesandbox