React Query（TanStack Query）：React 的高效資料取得與狀態管理

React Query (TanStack Query)：一個強大的 React 資料擷取與狀態管理庫

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

TanStack Query 可協助開發人員以最少的設定管理 React 應用程式中的伺服器狀態，確保流暢的使用者體驗，尤其是在處理非同步操作時。

---

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

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

它主要用於管理伺服器狀態，它指的是來自遠端伺服器或API的數據，例如來自REST API、GraphQL或任何其他資料來源的資料。

主要特點：

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

---

2. React Query 的核心概念

1.查詢

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

範例：

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

2.突變

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

範例：

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

3.快取

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

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

範例：

4.分頁

React Query 提供內建的分頁支援。您可以使用自訂頁面和限制參數來獲取分頁數據，並且它將適當地快取回應。

範例：

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

---

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

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

1.設定 React 查詢提供者

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

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

---

4. React Query 的進階功能

1.分頁與無限查詢

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

範例：

2.查詢無效

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

範例：

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

---

5.使用 React Query 的好處

1.簡化的資料取得

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

2.自動快取

預設會快取獲取的數據，減少不必要的網路請求並加快您的應用程式的速度。

3.後台更新

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

4.內建分頁與無限查詢

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

5.用於調試的開發工具

React Query 提供了一個優秀的 DevTools 介面，用於即時檢查查詢、突變及其狀態。

---

**6。結論

**

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

---

以上是React Query（TanStack Query）：React 的高效資料取得與狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！