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