最近因为工作的关系，开始接触 React Query[1]。不用不知道，一用真好用！
React Query 是以前的叫法，现在叫 TanStack Query。之所以改名字，是因为这个团队发现，他们可以把这套方案推广到除 React 之外的其他框架中去。
图片
如图所示，目前（2024.06）最新的 v5 版本已经支持包含 React、Vue、Angular 在内的 5 大框架了。
那 React Query 到底是做什么的呢？
笼统地说，React Query 是用来管理接口请求的，包括增删改查所有类型的接口。管理的内容包括响应数据和请求状态，可以让你少些很多样板代码。
另外，一旦学会了 React Query 的使用，那么在其他框架中的应用也是一样，上手就快了。
不过 React Query 学习成本也高，要彻底熟练 React Query 的使用，就要学习很多概念，不过理解这些概念对于我们写出交互友好的页面又极其关键。
于是，我便萌生了写一个 React Query 系列文章的想法。本文就是第一篇，大概谈论它是做什么的，如何使用，有什么能力，后面再一篇一个具体话题单独讨论。
React Query 是从 v3 版本改名字的：
新旧版本改动不多[2]，因为我现在用的是旧包，我就那它举例了。
先创建一个 React 项目。
npm create vite@latest react-query-demos -- --template reactcd react-query-demos安装 react-query[3] 依赖，启动项目。
npm install react-querynpm installnpm run dev接下来删除 index.css 中的内容，再修改 App.jsx，注入 React Query 上下文依赖。
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'const queryClient = new QueryClient()export default function App() { return ( <QueryClientProvider client={queryClient}> {/* ... */} </QueryClientProvider> )}这一步是必须的，后续 React Query 的接口查询和修改等 API 能力都有赖于 queryClient。
说了那么多，我们直接上一个 React Query 案例直观感受一下它的使用。
我们创建一个 <Example /> 组件，内容如下：
import { useQuery } from 'react-query'function Example() { // 1) const { isLoading, isError, error, data } = useQuery('repoData', () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json() ) ) // 2) if (isLoading) return 'Loading...' if (isError) return 'An error has occurred: ' + error.message // 3) return ( <div> <h1>{data.name}</h1> <p>{data.description}</p> <strong>
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-93085-0.htmlReact Query 是做什么的？你知道吗？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： HTTP QUERY method，前端传SQL不再是笑话
下一篇： ASP.NET Core 性能优化指南
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
