React Query 核心概念大杂烩

先说说React Query到底是干啥的。 它不是 UI 框架，也不是全家桶的状态管理。 它专门管服务器那边的数据，帮你把请求、缓存、同步全搞定。 说白了就是让你写少点代码，跑少点网络请求，页面geng丝滑。 哈哈，你懂的，用它基本上省心又省力。

每一次 useQuery dou要给它一个 key。 这个 key 就像身份证，唯一且Neng描述这次请求的“身份”。 Zui常见的写法是数组形式，比如 。 别把所有请求dou扔进同一个 ，那缓存全会冲突。 不对不对，我刚才说成了字符串，其实数组geng安全。 关键是保持层次分明，这样缓存才Neng精准命中。

queryFn 必须返回一个 Promise，里面写 fetch 或 axios dou行。 记得把响应体转成 JSON，不然后面用 data 时会报错。 Ru果你想统一错误处理，Ke以在这里抛异常，让 React Query 捕获。 比如： js const fetchUser = async => { const res = await fetch; if throw new Error; return res.json; }; 简单直接，别忘了加上 async/await 的语法糖，代码geng好读。

默认情况下请求完数据后会被标记为“陈旧”。 staleTime 控制多久时间内视为新鲜，不会再自动 refetch。 Ru果你想让数据常驻内存，Ke以把 staleTime 拉长到几分钟甚至几小时。 cacheTime 决定多久没有任何组件在使用时才会清理缓存。 这俩配合得好，就NengZuo到“只要不变就不重新请求”。 说实话，这也是 React Query Zui牛逼的地方之一啦。

网络波动？接口偶尔挂？别慌，React Query 默认会重试三次。 你Ke以通过 retry 配置自定义次数或条件函数。 比如只在 5xx 错误时重试，而 4xx 错误直接抛出给 UI 显示。 还有 onError 回调，让你在出错时弹 toast 或记录日志。 记得别把 retry 设置成无限，否则用户可Neng卡死等太久。

多个组件几乎同时想要相同的数据？React Query 会自动合并这些请求，只发一次网络调用，然后把结果分发给所有订阅者。 这叫查询去重，真的省流量也省时间。

查询负责读，mutation 专治写——创建、新增、geng新或删除数据dou走 mutation。 mutationFn 同样返回 Promise，一般是 POST/PUT/DELETE 请求。

常见模式：

调用 mutation.mutate 发起请求。

成功后用 queryClient.invalidateQueries 手动失效相关查询，让列表重新拉Zui新数据。

还有 onSuccess / onError / onSettled 等回调Ke以帮你Zuo乐观geng新或错误回滚。

在根组件里包一层 就算完成初始化。

这里Ke以统一设置默认 staleTime、retry 次数、refetchOnWindowFocus 等全局行为。

useInfiniteQuery：

想实现下拉加载geng多？用 useInfiniteQuery 把分页信息包装进去，每次 fetchNextPage dou自动拼接新数据。

prefetchQuery：

鼠标悬停链接时提前预取数据，这样用户点进去几乎是瞬间渲染。

有时候我们辛苦写的技术博客，被百度搜索忽略，你是不是也遇到过？哈哈，说实话，这事儿挺尴尬的。

原因大多是：

页面缺少结构化数据和合理的 meta 标签。

内容重复度高，被认为是垃圾信息。

服务器返回头部没有正确的 HTTP 状态码或 robots.txt 阻止爬虫。

解决办法hen简单：

为每篇文章加上唯一的标题和 description，并使用 H1~H6 合理层级。

确保正文文字足够原创且字数充足。

检查 robots.txt 确认没有 disallow /important-path/ 的规则。

# 小贴士 # 把重要关键词放在开头段落，并适当出现几次自然流畅才行。

TanStack Query 自带一个 DevTools 插件，用起来跟 Chrome 开发者工具一样直观。

打开后Ke以kan到当前所有 query 的状态。

还Neng手动触发 refetch 或清空缓存，非常适合调试阶段使用。

A/B 测试：

- 为不同实验组设定不同 queryKey，如 与 ，分别获取对应配置。

- 用 queryClient.setQueryData 手动写入实验结果，实现即时切换而不用刷新页面。

实时订阅：

- 使用 WebSocket 或 Server‑Sent Events 推送新数据，然后调用 queryClient.setQueryData geng新对应缓存即可，无需额外轮询。

QueryKey：ID+参数组合；唯一且可序列化；决定缓存命中率；