REACT查詢3：獲取和管理數據的指南

使用 React Query 簡化前端 CRUD 應用的數據獲取

構建前端 CRUD 應用起初很容易，但隨著功能的增加，複雜性會迅速提升。對於每個 API 端點，都需要處理狀態管理、同步、緩存和錯誤處理。本文將介紹一個名為 React Query 的庫，以及它如何幫助解決所有這些問題。該庫自稱是“缺失的數據獲取庫”，為你的 React 應用提供“服務器狀態管理”。

我們將使用一個完整的 React Query 演示項目來學習該庫提供的核心功能。然後，你就可以將這些知識應用到自己的項目中。首先，在開始項目設置之前，讓我們先了解一些內容。

關鍵要點

• React Query 3 簡化了 React 應用中的狀態管理和數據獲取，高效地處理緩存、同步和錯誤管理。
• 該庫適用於熟悉 React、React Router 和 REST API 的中高級開發者。
• React Query 3 在 2.x 版本的基礎上增加了新功能和改進，並為升級用戶提供了遷移指南。
• 演示項目中演示的關鍵功能包括基本查詢、分頁查詢和無限查詢，以及創建、更新和刪除操作。
• React Query 的 Devtools 實用程序通過實時可視化內部狀態和流程來輔助調試。
• cacheTime 和 staleTime 等配置選項通過管理數據新鮮度和緩存持續時間來優化性能。
• 該庫支持無限滾動和復雜狀態依賴等高級場景，增強了用戶體驗和開發者體驗。

關於 React Query 3

React Query 是由 Tanner Linsey 創建的一個開源項目。最新的主要版本 React Query 3 於 2020 年 12 月正式發布。在這個新版本中，添加了新功能並改進了現有功能。

需要注意的是，與之前非常流行的 React Query 2.x 版本相比，它有一些重大更改。有一個遷移指南清楚地解釋了這些更改，因為你可能會遇到很多針對舊版本編寫的過時教程。

新版本提供了巨大的改進，許多之前報告的錯誤都已解決。 3.x 版本雖然已準備好用於生產環境，但仍在不斷開發中，並定期修復新發現的錯誤。

前提條件

本文面向中高級前端開發者，他們已經掌握了以下方面的基本技能和知識：

• React
• React Router
• React Hooks
• REST API 數據獲取

在你的開發機器環境中，你需要設置以下內容：

• Node.js
• Git
• REST 客戶端，例如 Postman、Insomnia 或 VS Code 的 REST 擴展

關於項目

我們將分析的演示項目是一個 React 前端應用程序，它將使用 React Query 獲取 REST JSON API 服務器提供的數據。該應用程序僅由五個頁面組成，展示了 React Query 提供的功能。這些功能包括：

• 基本查詢
• 分頁查詢
• 無限查詢
• 創建操作
• 更新操作
• 刪除操作

React Query 提供了更多功能，但本文篇幅有限，無法一一介紹。以下是我們將使用的應用程序的預覽：

項目設置

在我們開始設置之前，我認為最好先簡要了解一下項目中使用的其他依賴項。這些包括：

• Vite：一個非常快速的構建工具
• WindiCSS：一個非常快速的 Tailwind CSS 編譯器
• React Hook Form：一個使用 React hook 的表單構建器和驗證庫
• React Modal：一個可訪問的模態組件
• Axios：一個基於 Promise 的瀏覽器 HTTP 客戶端
• JSON Server：一個完整的偽造 REST API 服務器

要在你自己的機器上設置 React Query 演示應用程序，請執行以下說明：

# 克隆项目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 导航到项目目录
cd react-query-demo

# 安装包依赖项
npm install

# 为 json-server 设置数据库文件
cp api/sample.db.json api/db.json

# 启动 json-server
npm run json-server

json-server 使用的數據庫文件包含一個用戶數組。當你執行 npm run json-server 時，一個偽造的 API 服務器將在端口 3004 上啟動。執行 GET 請求將產生以下示例 JSON 響應：

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

接下來，啟動將運行前端代碼的開發服務器：

# 在另一个终端中，启动 React 开发服务器
npm run dev

轉到你的瀏覽器並打開 http://localhost:3000 以訪問應用程序。你應該會有與上面預覽中相同的體驗。請確保執行以下任務，以便徹底探索應用程序的功能：

• 查看基本查詢頁面（主頁）。
• 訪問分頁頁面並與“上一頁”和“下一頁”按鈕進行交互。
• 訪問無限頁面並與“加載更多”按鈕進行交互。
• 返回基本查詢頁面並單擊“創建用戶”按鈕。你將被定向到“創建用戶”頁面。填寫表單並單擊“保存”按鈕。
• 在用戶表中，找到“編輯”圖標。單擊它。這將帶你到“編輯用戶”頁面。進行任何你喜歡的更改，然後點擊“保存”按鈕。
• 在用戶表中，找到“刪除”圖標。單擊它。這將啟動一個模態對話框，要求你確認刪除操作。單擊“刪除”按鈕以確認。

完成所有上述任務後，我們可以開始對項目進行分解。請查看項目結構，以便了解每個組件和視圖的位置。我將在本文中提供這些組件的簡化版本，以便你了解在項目中使用 React Query 的基礎知識。

安裝 React Query

可以使用以下命令在空白或現有 React 項目中安裝 React Query：

# 克隆项目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 导航到项目目录
cd react-query-demo

# 安装包依赖项
npm install

# 为 json-server 设置数据库文件
cp api/sample.db.json api/db.json

# 启动 json-server
npm run json-server

該包包含你所需的一切——包括 Devtools 實用程序功能，我們將在後面的部分中探討。安裝包後，你需要更新你的頂級組件——App.jsx——如下所示：

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

QueryClientProvider 的任何子組件都將能夠訪問 React Query 庫提供的 hook。我們將在本文中使用的 hook 是：

• useQuery
• useInfiniteQuery
• useMutation
• useQueryClient

以下是一個更新後的（簡化版）App.jsx，其中包含我們將使用的子視圖：

# 在另一个终端中，启动 React 开发服务器
npm run dev

(後續內容，請根據你的要求繼續翻譯剩餘部分，包括UI組件、基本查詢、分頁查詢、無限查詢、Mutations等章節。)

以上是REACT查詢3：獲取和管理數據的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！