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

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

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

關鍵要點

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

關于 React Query 3

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

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

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

前提條件

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

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

在你的開發(fā)機器環(huán)境中，你需要設置以下內容：

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

關于項目

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

• 基本查詢
• 分頁查詢
• 無限查詢
• 創(chuàng)建操作
• 更新操作
• 刪除操作

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

項目設置

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

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

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

# 克隆項目
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 使用的數據庫文件包含一個用戶數組。當你執(zhí)行 npm run json-server 時，一個偽造的 API 服務器將在端口 3004 上啟動。執(zhí)行 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"
  }
]

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

# 在另一個終端中，啟動 React 開發(fā)服務器
npm run dev

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

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

完成所有上述任務后，我們可以開始對項目進行分解。請查看項目結構，以便了解每個組件和視圖的位置。我將在本文中提供這些組件的簡化版本，以便你了解在項目中使用 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 開發(fā)服務器
npm run dev

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

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