乐闻世界logo
5月28日 02:10

什么是 React Query，它解决了前端开发中的哪些常见问题？

React Query（现名 TanStack Query）是一个专门管理服务器状态的异步状态管理库。它解决的核心问题是：把原本散落在 useEffect + useState + 全局状态库中的数据获取逻辑，收敛到声明式的 Hook 调用中。

它解决的关键问题

1. 手动管理请求状态的样板代码

没有 React Query 时，每个请求都要写 loading、error、data 三件套：

js
// 传统写法
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetch("/api/todos")
    .then(res => res.json())
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

用 React Query 一行替代：

js
const { data, isLoading, isError } = useQuery({
  queryKey: ["todos"],
  queryFn: () => fetch("/api/todos").then(res => res.json()),
});

2. 缓存与重复请求

React Query 基于 queryKey 自动缓存响应数据。相同 key 的多个组件只发一次请求，后续直接读缓存。通过 staleTime 和 gcTime 控制数据新鲜度和缓存回收。

3. 数据同步与过期刷新

内置 stale-while-revalidate 策略：先展示缓存数据，后台静默刷新。窗口重新聚焦、网络恢复时自动重新请求，无需手动监听事件。

4. 竞态条件

当快速切换页面或筛选条件时，早期请求的响应可能覆盖最新数据。React Query 自动取消过期请求，确保结果与当前 queryKey 匹配。

5. 服务端状态与客户端状态混用

Redux 管客户端 UI 状态没问题，但把服务端数据也塞进去会导致：手动写 loading 状态、手动处理缓存失效、手动同步更新。React Query 把服务端状态单独抽出来，让 Redux 只管 UI 状态。

追问

  • staleTime 和 gcTime 的区别是什么？staleTime 控制数据何时标记为过期（触发后台刷新），gcTime 控制缓存多久后被垃圾回收（彻底删除）。
  • useMutation 如何配合 queryClient.invalidateQueries 实现乐观更新？先通过 onMutate 回调更新缓存，失败时在 onError 中回滚。
  • React Query v5 相比 v4 有哪些破坏性变更？移除了 onError/onSuccess 全局回调，统一用 queryClient.getQueryData 替代。
  • 为什么说 React Query 是异步状态管理器而非数据请求库？它不关心请求怎么发（fetch/axios/GraphQL 都行），只管 Promise 的状态流转和缓存策略。
标签：React