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

Question

使用钩子的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

Answer 2

使用React 18，您可以将"可见性更改"与React全新挂钩useSyncExternalStore 一起使用

export function useVisibilityChange(serverFallback: boolean) {
const getServerSnapshot = () => serverFallback;
const [getSnapshot, subscribe] = useMemo(() => {
return [
() => document.visibilityState === 'visible',
(notify: () => void) => {
window.addEventListener('visibilitychange', notify);
return () => {
window.removeEventListener('visibilitychange', notify);
};
},
];
}, []);

Gist带挂钩

p.S：别忘了跨浏览器使用