TanStack Query介绍
TanStack Query（原 React Query）是一个专注于异步状态管理的开源库，核心目标是简化数据获取、缓存、同步和更新流程。它尤其擅长管理服务器状态（如 API 数据），与传统的客户端状态管理库（如 Redux）形成互补。
TanStack Query 的主要优势
1.简化的数据获取
TanStack Query 的 useQuery hook 使用简洁的声明式语法简化了数据获取。比如:
const { data, isLoading, error } = useQuery({
queryKey: ["todos"],
queryFn: () => fetchTodos(),
});
这个 hook 处理获取、缓存和错误状态，避免编写重复的样板代码。
2.查询去重
TanStack Query 的查询去重功能可防止对相同数据进行重复的 API 调用。当多个组件请求相同的数据（例如，用户个人资料）时，TanStack Query 会将它们合并为单个请求，从而降低服务器负载并提升性能，避免资源浪费。
3.自动缓存
TanStack Query 在首次请求后自动缓存数据，后续相同请求直接返回缓存结果，减少网络请求提升性能和用户体验。
4.乐观更新
TanStack Query 支持乐观的 UI 更新（Optimistic Updates）。当用户提交数据时，先更新 UI，再发送请求，如果请求失败则回滚，从而带来更流畅的用户体验。
5.分页和无限查询
简化分页和无限滚动模式的实现，使加载和显示大型数据集更加容易。
6.开发者工具：
TanStack Query 包含专用开发者工具，用于可视化查看缓存状态、查询历史及数据依赖图，提升调试效率。
使用示例
首先我们需要一个用于获取数据列表的查询函数:
// api.js
export async function fetchPosts() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
return await response.json()
}
1. Installation
可以通过 npm 进行安装:
npm install @tanstack/react-query
2. 设置 QueryClient
// main.jsx
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App.jsx";
const queryClient = new QueryClient();
createRoot(document.getElementById("root")).render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>,
);
3. 使用 useQuery 获取数据
// App.jsx
import { useQuery } from "@tanstack/react-query";
import { fetchPosts } from "./api";
function Posts() {
const { data, error, isLoading } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts });
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
export default Posts;
4. 使用 Mutations 修改服务器上的数据
import { useMutation, useQueryClient } from "@tanstack/react-query";
function AddPost() {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (newPost) =>
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify(newPost),
}),
onSuccess: () => {
// 添加新帖子后刷新缓存
queryClient.invalidateQueries({ queryKey: ["posts"] });
},
});
const handleAddPost = () => {
mutation.mutate({
title: "foo",
body: "bar",
userId: 1,
});
};
return (
<button onClick={handleAddPost} disabled={mutation.isPending}>
Add Post
</button>
);
}
export default AddPost;
TanStack Query 是否可以取代 Redux、MobX 或其他全局状态管理器？
根据 TanStack 团队的说法:
- TanStack Query 是一个服务器状态库，负责管理服务器和客户端之间的异步操作。
- Redux、MobX、Zustand 等都是客户端状态库，可用于存储异步数据，但与 TanStack Query 等工具相比效率较低。
对于绝大多数应用程序而言，将所有异步代码迁移到 TanStack Query 后，剩余的真正可全局访问的客户端状态通常非常小。
在某些情况下，应用程序可能确实包含大量仅用于客户端的同步状态（例如可视化设计器或音乐制作应用程序），在这种情况下，TanStack Query 不能替代本地/客户端状态管理。
总结
TanStack Query 是一款功能强大的工具，可用于管理服务器状态、简化异步数据处理并提升应用程序性能，告别繁琐的状态管理、手动重新获取以及层出不穷的异步代码。
