当我返回选项卡时，为什么 useQuery 使我的组件重新呈现？

Question

我正在使用 react-query 库，我查了一下，useQuery 可以让你的 react 组件重新渲染，因为它有状态，但奇怪的是当我更改选项卡时它会重新渲染 (比如，我去 youtube，然后回到我的应用程序，组件就会重新呈现）。但它只发生在 useQuery 上，我不明白为什么。

编辑：当我单击我的控制台然后再次单击应用程序时也会发生这种情况

代码很简单：

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/")
);
console.log(data);

这确实正在发生。每次我回到我的应用程序时，它都会再次记录数据。我不知道我错过了什么

Answer 1

如果您使用 react-query library, consider setting the refetchOnWindowFocus 选项 false

所以你的代码应该是这样的

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/"), 
    {
      refetchOnWindowFocus: false
    }
);
console.log(data);

您还可以设置一个 refetchInterval 选项以毫秒为单位仅在特定时间间隔重新获取

当我返回选项卡时，为什么 useQuery 使我的组件重新呈现？

Why is useQuery making my component re-render when I come back to the tab?

javascript

reactjs

axios

react-hooks

react-query