缓存、过期时间与后台重新获取
配置 staleTime 和 gcTime，以控制何时从服务器重新获取数据。
缓存、过期时间与后台重新获取 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
在本课中，您将配置 staleTime 和 gcTime，以控制 React Query 保持数据新鲜的时长，以及在内存中保留缓存数据的时长。
新鲜数据与过期数据
React Query 会跟踪缓存数据是“新鲜”还是“过期”。新鲜数据会立即返回，无需发起网络请求。过期数据也会立即返回，但同时会在后台开始重新获取，以更新数据。
staleTime
staleTime 定义数据保持新鲜的时长（以毫秒为单位）。默认值为 0（立即过期）。将其设置为 60000 后，最近一分钟内获取的数据会直接返回，不会在后台重新获取。
useQuery({
queryKey: ['users'],
queryFn: fetchUsers,
staleTime: 60_000, // fresh for 60 seconds
})为静态数据设置 staleTime
对于很少变化的数据（例如国家列表和配置选项），请设置较高的 staleTime。对于实时数据（例如股票价格），请保持默认值 0，并启用轮询。
// Effectively never stale — reload only on explicit invalidation
useQuery({ queryKey: ['countries'], queryFn: fetchCountries,
staleTime: Infinity })gcTime（垃圾回收）
gcTime（原名 cacheTime）定义未使用的缓存数据在被垃圾回收前留存在内存中的时长。默认值为 5 分钟。即使超过 gcTime，只要新的订阅者挂载，React Query 仍可以立即重新获取数据。
useQuery({
queryKey: ['products'],
queryFn: fetchProducts,
gcTime: 10 * 60 * 1000, // keep in memory for 10 minutes
})staleTime 与 gcTime
staleTime 控制 WHEN 重新获取数据（数据的新鲜程度）。gcTime 控制 WHEN 从内存中丢弃缓存数据。通常 staleTime <= gcTime。
后台重新获取指示器
React Query 在后台重新获取数据时，即使 `isLoading` 为 false（因为数据已经缓存），`isFetching` 仍为 true。请使用 isFetching 显示不显眼的加载指示器。
const { data, isLoading, isFetching } = useQuery({ /* ... */ });
return (
<>
{isLoading ? <Spinner /> : <DataView data={data} />}
{isFetching && !isLoading && <RefreshIndicator />}
</>
);refetchOnWindowFocus
默认情况下，用户切回标签页时，React Query 会重新获取已过期的查询。对于很少更新的数据，可以禁用此行为。
useQuery({
queryKey: ['settings'],
queryFn: fetchSettings,
refetchOnWindowFocus: false,
})使用 refetchInterval 进行轮询
设置 `refetchInterval`，即可按照计时器自动轮询查询。这对于实时数据面板很有用。
useQuery({
queryKey: ['liveStats'],
queryFn: fetchStats,
refetchInterval: 5000, // every 5 seconds
})占位数据
使用 `placeholderData` 在重新获取数据期间显示之前的数据，避免布局跳动。keepPreviousData 选项可以轻松实现这一点，用于分页时尤其方便。
import { keepPreviousData } from '@tanstack/react-query';
useQuery({
queryKey: ['posts', page],
queryFn: () => fetchPage(page),
placeholderData: keepPreviousData,
})快速检查
将查询的 staleTime 设置为 Infinity 有什么效果？
回顾
staleTime 控制数据的新鲜程度，即数据多久后会触发后台重新获取。gcTime 控制内存占用，即未使用的数据在缓存中保留多久。isFetching 表示正在进行后台重新获取。使用 placeholderData 实现平滑分页。
接下来
下一课：**使用 useMutation 执行变更操作**——您将向 API 发送数据，并在操作成功后使查询失效。
常见问题解答
「缓存、过期时间与后台重新获取」课时是免费的吗？
是的 — 「缓存、过期时间与后台重新获取」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「缓存、过期时间与后台重新获取」这节课中我会学到什么？
配置 staleTime 和 gcTime，以控制何时从服务器重新获取数据。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「缓存、过期时间与后台重新获取」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。