React Query (TanStack Query)：一個強(qiáng)大的 React 資料擷取與狀態(tài)管理庫

React Query（現(xiàn)在稱為 TanStack Query）是一個非常流行的 React 應(yīng)用程式資料取得和狀態(tài)管理庫。它透過處理資料獲取、快取、同步和分頁的複雜性來簡化遠(yuǎn)端資料的處理。 React Query 抽象化了發(fā)出 API 請求、儲存和更新資料以及管理載入狀態(tài)所涉及的大部分手動程序。

TanStack Query 可協(xié)助開發(fā)人員以最少的設(shè)定管理 React 應(yīng)用程式中的伺服器狀態(tài)，確保流暢的使用者體驗，尤其是在處理非同步操作時。

---

1.什麼是 React 查詢（TanStack 查詢）？

React Query 是一個資料取得和狀態(tài)管理工具，有助於簡化React應(yīng)用程式中與伺服器端資料互動的過程。它抽象化並管理資料的取得、快取、同步和後臺更新。

它主要用於管理伺服器狀態(tài)，它指的是來自遠(yuǎn)端伺服器或API的數(shù)據(jù)，例如來自REST API、GraphQL或任何其他資料來源的資料。

主要特點(diǎn)：

• 自動快取：React Query 自動快取獲取的數(shù)據(jù)，這樣可以更快地獲取後續(xù)數(shù)據(jù)，而無需額外的網(wǎng)路請求。
• 自動同步：即使使用者在頁面之間切換或重新訪問應(yīng)用程序，它也可確保您的資料在客戶端和伺服器之間保持同步。
• 後臺取得：React Query 可以在後臺自動重新取得數(shù)據(jù)，以確保使用者始終擁有最新的數(shù)據(jù)。
• 輪詢和分頁：React Query 支援開箱即用的輪詢和分頁，這簡化了這些常見任務(wù)。

---

2. React Query 的核心概念

1.查詢

React Query 中的查詢用於從伺服器（或任何外部資料來源）取得資料。查詢由唯一鍵標(biāo)識，React Query 使用該鍵來快取和追蹤資料。

範(fàn)例：

• useQuery 鉤子使用 fetchPosts 函數(shù)取得資料。 posts 字串是唯一的按鍵，React Query 會將取得的資料快取在該鍵下。

2.突變

突變用於修改或建立伺服器上的資料（例如，POST、PUT、DELETE 請求）。與查詢一樣，可以追蹤突變並在成功突變後自動更新您的狀態(tài)。

範(fàn)例：

• useMutation 鉤子用於建立、更新或刪除資料等操作。

3.快取

React Query 自動快取查詢結(jié)果。這種快取可以實現(xiàn)更快的渲染，並避免向伺服器發(fā)出重複的請求。重新取得查詢時，快取資料會自動更新。

您可以自訂快取行為以滿足應(yīng)用程式的需求，例如設(shè)定快取時間或指定過時時間（快取資料被視為過時的時間）。

範(fàn)例：

4.分頁

React Query 提供內(nèi)建的分頁支援。您可以使用自訂頁面和限制參數(shù)來獲取分頁數(shù)據(jù)，並且它將適當(dāng)?shù)乜烊』貞?yīng)。

範(fàn)例：

• useQuery 鉤子與陣列鍵（['posts', page]）一起使用來取得分頁資料。

---

3.安裝與設(shè)定 React Query (TanStack Query)

要使用React Query，您需要安裝react-query (TanStack Query)：

1.設(shè)定 React 查詢提供者

要在應(yīng)用程式中啟用 React Query，您需要將根元件包裝在 QueryClientProvider 中，以為整個應(yīng)用程式提供必要的上下文。

• QueryClient 是 React Query 的核心物件。它管理您應(yīng)用程式中的所有查詢和變更。

---

4. React Query 的進(jìn)階功能

1.分頁與無限查詢

React Query 透過 useInfiniteQuery 支援分頁和無限捲動，讓您處理無限清單和分頁。

範(fàn)例：

2.查詢無效

您可以使用 queryClient.invalidateQueries 手動使查詢無效。這會強(qiáng)制重新取得指定查詢鍵的資料。

範(fàn)例：

• 這可確保在建立新貼文後，自動重新取得貼文清單。

---

5.使用 React Query 的好處

1.簡化的資料取得

React Query 減少了處理載入、成功和錯誤狀態(tài)的樣板文件，使資料取得更容易且更具聲明性。

2.自動快取

預(yù)設(shè)會快取獲取的數(shù)據(jù)，減少不必要的網(wǎng)路請求並加快您的應(yīng)用程式的速度。

3.後臺更新

React Query 提供後臺資料獲取，確保您的應(yīng)用程式的資料即使在未明確重新獲取時也保持最新。

4.內(nèi)建分頁與無限查詢

使用 React Query 的內(nèi)建鉤子處理分頁和無限滾動既簡單又有效率。

5.用於調(diào)試的開發(fā)工具

React Query 提供了一個優(yōu)秀的 DevTools 介面，用於即時檢查查詢、突變及其狀態(tài)。

---

**6。結(jié)論

**

React Query (TanStack Query) 提供了一種高效且可擴(kuò)展的方式來處理 React 應(yīng)用程式中的資料擷取和狀態(tài)管理。借助內(nèi)建快取、後臺獲取、分頁和錯誤處理，React Query 讓與伺服器端資料的互動變得簡單、無縫。

---

以上是React Query（TanStack Query）：React 的高效資料取得與狀態(tài)管理的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！