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 加载中...; if (error) return 数据获取失败; return ( - {data.map((post) => (
- {post.title} ))}
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 ( {mutation.isLoading ? 创建中...
: null} {mutation.isError ? 创建失败
: null} {mutation.isSuccess ? 帖子创建成功！
: null} );};
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 = () => ( );
QueryClient 是 TanStack Query 的核心对象，管理应用中的所有查询和变异。
4. TanStack Query 的高级功能
1. 分页和无限查询
TanStack Query 通过 useInfiniteQuery 支持分页和无限滚动，方便处理无限列表和分页。
2. 查询失效
可以使用 queryClient.invalidateQueries 手动使查询失效，强制重新获取指定查询键的数据。
5. 使用 TanStack Query 的优势
简化数据获取：减少了处理加载、成功和错误状态的样板代码。自动缓存：默认缓存数据，减少不必要的网络请求，提升应用速度。后台更新：后台自动获取数据，确保数据最新。内置分页和无限查询：方便处理分页和无限滚动。强大的调试工具：提供 Devtools 界面，方便调试。
6. 总结
TanStack Query 提供了一种高效且可扩展的方式来处理 React 应用中的数据获取和状态管理。内置的缓存、后台获取、分页和错误处理功能，让与服务器端数据的交互变得简单而流畅。
以上就是React Query（TanStack Query）：React 的高效数据获取和状态管理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499657.html
微信扫一扫 
支付宝扫一扫 
