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 使用此键来缓存和追踪数据。
示例：
<code class="javascript">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>
);
};</code>
-
useQuery钩子使用fetchPosts函数获取数据。posts字符串是唯一键，TanStack Query 将数据缓存在此键下。
2. 变异 (Mutation)
变异用于修改或创建服务器上的数据（例如，POST、PUT、DELETE 请求）。与查询类似，可以追踪变异并在成功后自动更新状态。
示例：
<code class="javascript">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>
);
};</code>
-
useMutation钩子用于创建、更新或删除数据等操作。
3. 缓存 (Cache)
TanStack Query 自动缓存查询结果，从而实现更快的渲染速度并避免重复的服务器请求。重新获取查询时，缓存数据会自动更新。
可以自定义缓存行为，例如设置缓存时间或过期时间。
示例：
<code class="javascript">const { data } = useQuery('posts', fetchPosts, {
staleTime: 1000 * 60 * 5, // 缓存有效期为 5 分钟
cacheTime: 1000 * 60 * 30, // 缓存持续时间为 30 分钟
});</code>
4. 分页 (Pagination)
TanStack Query 提供内置的分页支持。可以使用自定义页面和限制参数来获取分页数据，它会适当地缓存响应。
示例：
<code class="javascript">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)
);
// ... (分页按钮逻辑) ...
};</code>
-
useQuery钩子与数组键 (['posts', page]) 一起使用来获取分页数据。
3. 安装和设置 TanStack Query
安装 TanStack Query：
<code class="bash">npm install react-query</code>
1. 设置 QueryClientProvider
要在应用中启用 TanStack Query，需要将根组件包装在 QueryClientProvider 中，为整个应用提供必要的上下文。
<code class="javascript">import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
const App = () => (
<QueryClientProvider client={queryClient}>
<YourApp />
</QueryClientProvider>
);</code>
-
QueryClient是 TanStack Query 的核心对象，管理应用中的所有查询和变异。
4. TanStack Query 的高级功能
1. 分页和无限查询
TanStack Query 通过 useInfiniteQuery 支持分页和无限滚动，方便处理无限列表和分页。
2. 查询失效
可以使用 queryClient.invalidateQueries 手动使查询失效，强制重新获取指定查询键的数据。
5. 使用 TanStack Query 的优势
- 简化数据获取：减少了处理加载、成功和错误状态的样板代码。
- 自动缓存：默认缓存数据，减少不必要的网络请求，提升应用速度。
- 后台更新：后台自动获取数据，确保数据最新。
- 内置分页和无限查询：方便处理分页和无限滚动。
- 强大的调试工具：提供 Devtools 界面，方便调试。
6. 总结
TanStack Query 提供了一种高效且可扩展的方式来处理 React 应用中的数据获取和状态管理。内置的缓存、后台获取、分页和错误处理功能，让与服务器端数据的交互变得简单而流畅。
