还记得第13课我们区分过"客户端状态"和"服务端状态"吗？如果你曾经手写过"发请求前设 loading，成功设数据，失败设 error，组件卸载要取消请求，数据要不要重新请求还得自己判断"这一整套逻辑，你会明白这些代码有多么重复和容易出错。React Query（现在也叫 TanStack Query）就是专门为"服务端状态"打造的库，帮你把这些体力活全部接管。 # 第17课：数据请求与缓存：React Query 入门 ## 基本配置 ```jsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); function App() { return ( ); } ``` ## useQuery：一行代码搞定请求、缓存、loading、error ```jsx import { useQuery } from '@tanstack/react-query'; function UserProfile({ userId }) { const { data: user, isLoading, isError, error } = useQuery({ queryKey: ['user', userId], // 缓存的唯一标识 queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json()) }); if (isLoading) return

加载中...

; if (isError) return

出错了：{error.message}

; return

{user.name}

; } ``` 对比手写 `useEffect + useState` 的版本，这里完全不需要自己管理 loading/error 状态，也不需要处理竞态条件——React Query 内部已经妥善处理好了。 ## 自动缓存与重新验证 ```jsx // 同样的 queryKey 在不同组件中被多次使用时，只会真正发起一次网络请求， // 之后的调用直接复用缓存，且会在数据"过期"或窗口重新聚焦时自动刷新 function Header() { const { data: user } = useQuery({ queryKey: ['user', 1], queryFn: () => fetch('/api/users/1').then(res => res.json()) }); return {user?.name}; } function Sidebar() { // 即使这里也用了同样的 queryKey，也不会重复发请求 const { data: user } = useQuery({ queryKey: ['user', 1], queryFn: () => fetch('/api/users/1').then(res => res.json()) }); return {user?.name}; } ``` ## useMutation：处理增删改操作 ```jsx import { useMutation, useQueryClient } from '@tanstack/react-query'; function AddTodoForm() { const queryClient = useQueryClient(); const mutation = useMutation({ mutationFn: (newTodo) => fetch('/api/todos', { method: 'POST', body: JSON.stringify(newTodo) }).then(res => res.json()), onSuccess: () => { // 新增成功后，让 todos 相关的缓存失效，触发自动重新请求 queryClient.invalidateQueries({ queryKey: ['todos'] }); } }); const handleSubmit = (text) => { mutation.mutate({ text, done: false }); }; return ( ); } ``` ## 依赖查询：一个请求依赖另一个请求的结果 ```jsx function UserPosts({ userId }) { const { data: user } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUser(userId) }); const { data: posts } = useQuery({ queryKey: ['posts', user?.id], queryFn: () => fetchPostsByUser(user.id), enabled: !!user, // 只有 user 存在时才发起这个请求 }); return

{posts?.map(p =>

{p.title}

)}

; } ``` ## 配置缓存时间 ```jsx useQuery({ queryKey: ['user', userId], queryFn: () => fetchUser(userId), staleTime: 5 * 60 * 1000, // 5分钟内数据视为"新鲜"，不会重新请求 gcTime: 10 * 60 * 1000 // 10分钟无人使用后，缓存被垃圾回收 }); ``` ## 小词典 - **React Query / TanStack Query**：专注于服务端状态（数据请求、缓存、重新验证）管理的库 - **queryKey**：标识一次查询的唯一键，相同的 key 会共享缓存 - **useMutation**：用于处理新增/修改/删除等有副作用的写操作 - **invalidateQueries**：让指定 key 的缓存失效，触发自动重新请求 - **staleTime**：数据被视为"新鲜"（不需要重新请求）的时长 ## 练习用 React Query 实现一个文章列表 + 详情页： 1. `useQuery` 获取文章列表，配置合理的 `staleTime` 2. 点击文章进入详情页，`useQuery` 依赖文章 ID 获取详情 3. 实现"点赞"功能，用 `useMutation` 提交后自动让文章列表缓存失效重新拉取 **预期效果：** 从列表进详情再返回列表，不会重复发起网络请求；点赞后列表数据自动同步更新。