TanStack Query：React 数据获取和状态管理利器
TanStack Query（原名 React Query）是备受青睐的 React 数据获取和状态管理库，它巧妙地处理了数据获取、缓存、同步和分页等复杂问题，显著简化了远程数据处理流程。开发者无需手动编写繁琐的 API 请求、数据存储与更新以及加载状态管理代码，TanStack Query 已经帮你完成了大部分工作。
TanStack Query 帮助开发者轻松管理 React 应用中的服务器状态，尤其在处理异步操作时，能确保流畅的用户体验。
1. TanStack Query 是什么？
TanStack Query 是一款数据获取和状态管理工具，它简化了 React 应用与服务器端数据交互的流程。它抽象并管理数据的获取、缓存、同步以及后台更新。
它主要用于管理服务器状态，即来自远程服务器或 API 的数据，例如 REST API、GraphQL 或其他数据源的数据。
主要特性：
自动缓存：自动缓存获取的数据，后续数据获取速度更快，无需重复网络请求。 自动同步：即使用户切换页面或重新访问应用，数据也能保持客户端和服务器端的同步。 后台获取：自动在后台重新获取数据，确保用户始终拥有最新数据。 内置分页和轮询：简化了分页和轮询等常见任务。2. TanStack Query 的核心概念
1. 查询 (Query)
TanStack Query 中的查询用于从服务器（或任何外部数据源）获取数据。每个查询由唯一键标识，TanStack Query 使用此键来缓存和追踪数据。
示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { useQuery } from react-query;
function fetchPosts() {
return fetch(https://jsonplaceholder.typicode.com/posts)
.then((response) => response.json());
}
const Posts = () => {
const { data, error, isLoading } = useQuery(posts, fetchPosts);
if (isLoading) return <div>加载中...</div>;
if (error) return <div>数据获取失败</div>;
return (
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
};
2. 变异 (Mutation)
变异用于修改或创建服务器上的数据（例如，POST、PUT、DELETE 请求）。与查询类似，可以追踪变异并在成功后自动更新状态。
示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useMutation } from react-query;
function createPost(postData) {
return fetch(https://jsonplaceholder.typicode.com/posts, {
method: POST,
body: JSON.stringify(postData),
headers: { content-type: application/json },
}).then((response) => response.json());
}
const NewPost = () => {
const mutation = useMutation(createPost);
const handleCreatePost = async () => {
await mutation.mutate({ title: 新帖子, body: 这是一个新帖子 });
};
return (
<div>
<button onClick={handleCreatePost}>创建帖子</button>
{mutation.isLoading ? <p>创建中...</p> : null}
{mutation.isError ? <p>创建失败</p> : null}
{mutation.isSuccess ? <p>帖子创建成功！</p> : null}
</div>
);
};
3. 缓存 (Cache)
TanStack Query 自动缓存查询结果，从而实现更快的渲染速度并避免重复的服务器请求。重新获取查询时，缓存数据会自动更新。
可以自定义缓存行为，例如设置缓存时间或过期时间。
示例：1
2
3
4
const { data } = useQuery(posts, fetchPosts, {
staleTime: 1000 * 60 * 5, // 缓存有效期为 5 分钟
cacheTime: 1000 * 60 * 30, // 缓存持续时间为 30 分钟
});
4. 分页 (Pagination)
TanStack Query 提供内置的分页支持。可以使用自定义页面和限制参数来获取分页数据，它会适当地缓存响应。
示例：1
2
3
4
5
6
7
8
9
10
11
12
13
const fetchPage = (page) =>
fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
.then((res) => res.json());
const PaginatedPosts = () => {
const [page, setPage] = React.useState(1);
const { data, isLoading, isError } = useQuery(
[posts, page],
() => fetchPage(page)
);
// ... (分页按钮逻辑) ...
};
3. 安装和设置 TanStack Query
安装 TanStack Query：
1
npm install react-query
1. 设置 QueryClientProvider
1
2
3
4
5
6
7
8
9
import { QueryClient, QueryClientProvider } from react-query;
const queryClient = new QueryClient();
const App = () => (
<QueryClientProvider client={queryClient}>
<YourApp />
</QueryClientProvider>
);
4. TanStack Query 的高级功能
1. 分页和无限查询
TanStack Query 通过 useInfiniteQuery 支持分页和无限滚动，方便处理无限列表和分页。
2. 查询失效
可以使用 queryClient.invalidateQueries 手动使查询失效，强制重新获取指定查询键的数据。
5. 使用 TanStack Query 的优势
简化数据获取：减少了处理加载、成功和错误状态的样板代码。 自动缓存：默认缓存数据，减少不必要的网络请求，提升应用速度。 后台更新：后台自动获取数据，确保数据最新。 内置分页和无限查询：方便处理分页和无限滚动。 强大的调试工具：提供 Devtools 界面，方便调试。6. 总结
TanStack Query 提供了一种高效且可扩展的方式来处理 React 应用中的数据获取和状态管理。内置的缓存、后台获取、分页和错误处理功能，让与服务器端数据的交互变得简单而流畅。
以上就是React Query（TanStack Query）：React 的高效数据获取和状态管理的详细内容，更多请关注php中文网其它相关文章！