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

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

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

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

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

關(guān)於 React Query 3

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

需要注意的是，與之前非常流行的 React Query 2.x 版本相比，它有一些重大更改。有一個(gè)遷移指南清楚地解釋了這些更改，因?yàn)槟憧赡軙?huì)遇到很多針對(duì)舊版本編寫(xiě)的過(guò)時(shí)教程。

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

前提條件

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

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

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

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

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

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

• 基本查詢(xún)
• 分頁(yè)查詢(xún)
• 無(wú)限查詢(xún)
• 創(chuàng)建操作
• 更新操作
• 刪除操作

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

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

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

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

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

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

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

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

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

# 啟動(dòng) json-server
npm run json-server

json-server 使用的數(shù)據(jù)庫(kù)文件包含一個(gè)用戶(hù)數(shù)組。當(dāng)你執(zhí)行 npm run json-server 時(shí)，一個(gè)偽造的 API 服務(wù)器將在端口 3004 上啟動(dòng)。執(zhí)行 GET 請(qǐng)求將產(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"
  }
]

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

# 在另一個(gè)終端中，啟動(dòng) React 開(kāi)發(fā)服務(wù)器
npm run dev

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

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

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

安裝 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

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

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

# 啟動(dòng) json-server
npm run json-server

該包包含你所需的一切——包括 Devtools 實(shí)用程序功能，我們將在後面的部分中探討。安裝包後，你需要更新你的頂級(jí)組件——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 的任何子組件都將能夠訪問(wèn) React Query 庫(kù)提供的 hook。我們將在本文中使用的 hook 是：

• useQuery
• useInfiniteQuery
• useMutation
• useQueryClient

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

# 在另一個(gè)終端中，啟動(dòng) React 開(kāi)發(fā)服務(wù)器
npm run dev

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

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