使用 React Query 簡化前端 CRUD 應(yīng)用的數(shù)據(jù)獲取

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

我們將使用一個完整的 React Query 演示項(xiàng)目來學(xué)習(xí)該庫提供的核心功能。然后，你就可以將這些知識應(yīng)用到自己的項(xiàng)目中。首先，在開始項(xiàng)目設(shè)置之前，讓我們先了解一些內(nèi)容。

關(guān)鍵要點(diǎn)

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

關(guān)于 React Query 3

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

需要注意的是，與之前非常流行的 React Query 2.x 版本相比，它有一些重大更改。有一個遷移指南清楚地解釋了這些更改，因?yàn)槟憧赡軙龅胶芏噌槍εf版本編寫的過時教程。

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

前提條件

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

• React
• React Router
• React Hooks
• REST API 數(shù)據(jù)獲取

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

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

關(guān)于項(xiàng)目

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

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

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

項(xiàng)目設(shè)置

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

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

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

# 克隆項(xiàng)目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 導(dǎo)航到項(xiàng)目目錄
cd react-query-demo

# 安裝包依賴項(xiàng)
npm install

# 為 json-server 設(shè)置數(shù)據(jù)庫文件
cp api/sample.db.json api/db.json

# 啟動 json-server
npm run json-server

json-server 使用的數(shù)據(jù)庫文件包含一個用戶數(shù)組。當(dāng)你執(zhí)行 npm run json-server 時，一個偽造的 API 服務(wù)器將在端口 3004 上啟動。執(zhí)行 GET 請求將產(chǎn)生以下示例 JSON 響應(yīng)：

[
  {
    "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"
  }
]

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

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

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

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

完成所有上述任務(wù)后，我們可以開始對項(xiàng)目進(jìn)行分解。請查看項(xiàng)目結(jié)構(gòu)，以便了解每個組件和視圖的位置。我將在本文中提供這些組件的簡化版本，以便你了解在項(xiàng)目中使用 React Query 的基礎(chǔ)知識。

安裝 React Query

可以使用以下命令在空白或現(xiàn)有 React 項(xiàng)目中安裝 React Query：

# 克隆項(xiàng)目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 導(dǎo)航到項(xiàng)目目錄
cd react-query-demo

# 安裝包依賴項(xiàng)
npm install

# 為 json-server 設(shè)置數(shù)據(jù)庫文件
cp api/sample.db.json api/db.json

# 啟動 json-server
npm run json-server

該包包含你所需的一切——包括 Devtools 實(shí)用程序功能，我們將在后面的部分中探討。安裝包后，你需要更新你的頂級組件——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ā)服務(wù)器
npm run dev

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

以上是REACT查詢3：獲取和管理數(shù)據(jù)的指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！