最近因為工作的關系，開始接觸 React Query[1]。不用不知道，一用真好用！BkG28資訊網——每日最新資訊28at.com

React Query 是以前的叫法，現在叫 TanStack Query。之所以改名字，是因為這個團隊發現，他們可以把這套方案推廣到除 React 之外的其他框架中去。BkG28資訊網——每日最新資訊28at.com

圖片BkG28資訊網——每日最新資訊28at.com

如圖所示，目前（2024.06）最新的 v5 版本已經支持包含 React、Vue、Angular 在內的 5 大框架了。BkG28資訊網——每日最新資訊28at.com

那 React Query 到底是做什么的呢？BkG28資訊網——每日最新資訊28at.com

籠統地說，React Query 是用來管理接口請求的，包括增刪改查所有類型的接口。管理的內容包括響應數據和請求狀態，可以讓你少些很多樣板代碼。BkG28資訊網——每日最新資訊28at.com

另外，一旦學會了 React Query 的使用，那么在其他框架中的應用也是一樣，上手就快了。BkG28資訊網——每日最新資訊28at.com

不過 React Query 學習成本也高，要徹底熟練 React Query 的使用，就要學習很多概念，不過理解這些概念對于我們寫出交互友好的頁面又極其關鍵。BkG28資訊網——每日最新資訊28at.com

于是，我便萌生了寫一個 React Query 系列文章的想法。本文就是第一篇，大概談論它是做什么的，如何使用，有什么能力，后面再一篇一個具體話題單獨討論。BkG28資訊網——每日最新資訊28at.com

React Query 是從 v3 版本改名字的：BkG28資訊網——每日最新資訊28at.com

• v3 以前（包括 v3）包名叫 react-query
• 從 v4 開始包名改成 @tanstack/react-query 了

新舊版本改動不多[2]，因為我現在用的是舊包，我就那它舉例了。BkG28資訊網——每日最新資訊28at.com

安裝 React Query

先創建一個 React 項目。BkG28資訊網——每日最新資訊28at.com

npm create vite@latest react-query-demos -- --template reactcd react-query-demos

安裝 react-query[3] 依賴，啟動項目。BkG28資訊網——每日最新資訊28at.com

npm install react-querynpm installnpm run dev

接下來刪除 index.css 中的內容，再修改 App.jsx，注入 React Query 上下文依賴。BkG28資訊網——每日最新資訊28at.com

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'const queryClient = new QueryClient()export default function App() {  return (    <QueryClientProvider client={queryClient}>      {/* ... */}    </QueryClientProvider>  )}

這一步是必須的，后續 React Query 的接口查詢和修改等 API 能力都有賴于 queryClient。BkG28資訊網——每日最新資訊28at.com

快速開始

說了那么多，我們直接上一個 React Query 案例直觀感受一下它的使用。BkG28資訊網——每日最新資訊28at.com

我們創建一個 <Example /> 組件，內容如下：BkG28資訊網——每日最新資訊28at.com

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> 
                
本文鏈接：http://www.tebozhan.com/showinfo-26-93085-0.htmlReact Query 是做什么的？你知道嗎？
                
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
                
上一篇： HTTP QUERY method，前端傳SQL不再是笑話
                
下一篇： ASP.NET Core 性能優化指南