從 useEffect 到 React Query：在 React 中實現資料管理現代化

在現代 Web 開發環境中，建立快速回應的應用程式來有效管理伺服器端資料比以往任何時候都更加重要。在 React 中取得資料的傳統方法，尤其是使用 useEffect，通常會導致複雜的狀態管理、重複的程式碼和效能問題。借助 React Query，開發人員可以利用自動快取、後台獲取和內建突變支援等功能，同時最大限度地減少樣板程式碼。

在本文中，我們將探討 React Query 的核心概念，示範如何將其整合到我們的專案中，並重點介紹其可以顯著改進您的開發工作流程的強大功能。準備好改變您在 React 應用程式中獲取、快取和同步資料的方式！

為什麼我們應該停止使用 React Effects 來取得數據

雖然使用React 的useEffect 來獲取數據是完全有效的，但有幾個原因可以考慮放棄它，轉而使用像React Query 這樣的專用數據獲取庫（甚至React 文件也建議使用React Query 來獲取數據）。

使用 Effects 取得資料的一些缺點：

• 效能問題：「網路瀑布」和不必要的重新擷取是使用 React useEffect 時的一些常見問題，可能會導致非常糟糕的使用者體驗。
• 缺乏內建快取：useEffect不提供開箱即用的緩存，這會導致重複的網路請求和複雜的管理解決方案。
• 狀態管理的複雜性：使用 useEffect 手動管理載入、錯誤和資料狀態可能會導致程式碼繁瑣且容易出錯，尤其是在應用程式擴充時。
• 效果不在伺服器上運作：元件初始渲染時資料可能無法使用。

React 查詢如何運作

React Query 是一個功能強大的函式庫，旨在簡化 React 應用程式中的資料擷取和狀態管理。以下是 React Query 工作原理的詳細說明：

1. 查詢數據

• useQuery hook：React Query 的核心是 useQuery hook。這個鉤子可讓您從伺服器取得資料並自動管理其狀態（載入、錯誤、資料...）。
• 查詢鍵：每個查詢都由唯一的鍵（數組中的一個或多個字串）標識。這個鍵有助於 React Query 快取並有效管理資料。

2. 快取

• 自動快取：取得資料時，React Query 會快取它。如果再次進行相同的查詢，它將從快取中檢索數據，而不是發出新的網路請求。
• 過時資料管理：您可以定義資料應被視為新鮮（而不是過時）的時間。過了這段時間，React Query 將在後台重新取得資料。

3. 後台重新獲取

React Query 在多種場景下自動重新獲取數據，以保持數據新鮮和同步。發生這種情況的主要情況如下：

• 組件的掛載：組件掛載時，如果資料被認為是陳舊的。
• 視窗焦點：每當視窗重新獲得焦點時，例如當使用者在標籤或視窗之間切換並返回包含您的應用程式的視窗時。
• 網路重連：如果網路連線遺失並稍後恢復。

4. 數據突變

• useMutation Hook：指在伺服器上建立、更新或刪除資料的過程。與檢索資料的查詢不同，useMutation 用於修改資料並管理與其相關的副作用。
• 樂觀更新：當使用者執行會改變資料的操作時，UI 會立即更新以反映該操作的預期結果，從而增強使用者體驗。

5. 查詢失效

• React Query 允許您將快取的查詢標記為“過時”，以便下次造訪時重新取得它。這對於確保 UI 在執行某些操作（例如突變或用戶互動）後反映來自伺服器的最新數據至關重要。

6. 自動垃圾收集

• 當查詢不再使用且在一段時間內不活動時，React Query 會自動從快取中刪除查詢。此過程有助於防止記憶體洩漏並確保只有相關資料保留在快取中。

7. 開發工具

• React Query DevTools 是一個可選的、用戶友好的 React Query 工具，可以幫助我們開發人員調試和監視查詢、突變和快取狀態。它提供了一個視覺化介面來檢查查詢的詳細資訊並查看 React Query 如何管理其生命週期。

8. 伺服器端渲染（SSR）

• React Query 支援伺服器端渲染（SSR），這有助於在將資料傳送至客戶端之前在伺服器上預取資料。這使得初始頁面加載速度更快，並且可以透過向搜尋引擎提供完全渲染的頁面來改進 SEO。

如何實作 React 查詢

這是有關如何使用 React Query 來管理 React 應用程式中的伺服器資料擷取、快取、更新和同步的逐步指南。

第 1 步：安裝 React 查詢

首先，將 React Query 新增至您的專案：

npm install @tanstack/react-query

步驟 2： 設定 QueryClientProvider

要設定 React Query，請將您的應用程式包裝在 QueryClientProvider 中。此提供者使用 QueryClient 實例，該實例管理快取、後台取得和更新。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

第 3 步：使用 useQuery 取得數據

useQuery 掛鉤從 API 取得數據，自動快取資料並處理載入和錯誤等狀態。

npm install @tanstack/react-query

• Key (['todos'])：每個 useQuery 都需要一個唯一的 key 來識別和快取資料。
• 查詢函數 (fetchTodos)：此非同步函數從 API 取得您需要的資料。

步驟 4： 使用 useMutation 處理資料突變

useMutation 鉤子用於建立、更新或刪除資料。突變成功後，您可以使用查詢失效來重新取得相關資料並使應用程式的狀態保持最新。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

• 突變函數 (addTodo)：此非同步函數修改伺服器狀態。
• onSuccess：突變後，此回調使 ['todos'] 查詢無效，重新取得並更新資料以顯示新新增的待辦事項。

第 5 步：用於調試的可選開發工具

React Query DevTools 可以幫助您在開發過程中監控查詢、快取狀態等：

import { useQuery } from '@tanstack/react-query';

function YourComponent() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.map((todo) => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  );
}

// Sample fetch function
const fetchTodos = async () => {
  const response = await fetch('/api/todos');
  return response.json();
};

然後，加入 >到您的應用程式：

import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoAdder() {
  const queryClient = useQueryClient();
  const addTodoMutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries(['todos']);
    },
  });

  return (
    <button onClick={() => addTodoMutation.mutate({ title: 'New Todo' })}>
      Add Todo
    </button>
  );
}

const addTodo = async (newTodo) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

結論

使用 React Query 取代 useEffect 來獲取資料和產生副作用，這是建立現代 React 應用程式的一個很好的建議。

React Query 改變了您在 React 應用程式中處理伺服器端資料的方式，提供了一種更具聲明性的方法來簡化複雜的狀態管理。透過利用其強大的功能（例如快取、後台同步和查詢失效），您可以創建高度響應和高效能的應用程式。最後但並非最不重要的一點是，整合 React Query DevTools 可以輕鬆監控和調試，確保應用程式的資料流暢且透明。

無論您是建立簡單的單頁應用程式還是複雜的資料密集型應用程序，React Query 都可以讓您輕鬆建立更快、更聰明、更用戶友好的應用程式。

以上是從 useEffect 到 React Query：在 React 中實現資料管理現代化的詳細內容。更多資訊請關注PHP中文網其他相關文章！