同時使用 useEffect 和 React Query 的反例

讓我們看一個使用 useEffect 和 React Query 在 React 元件中獲取和顯示資料的計數器範例，重點關注每種方法如何處理資料擷取和副作用。

我們假設我們正在從 API 取得當前計數，並且該計數即時更新。目標是顯示計數器並使用 API 中的新資料對其進行更新。

場景1：使用useEffect

這裡，我們使用 useEffect 來取得計數器資料並手動處理狀態。

從「react」匯入 React, { useState, useEffect };

函數計數器() {
const [count, setCount] = useState(null); // 儲存計數器的狀態
const [正在加載，setLoading] = useState(true); // 加載狀態
const [錯誤，setError] = useState(null); // 錯誤處理狀態

useEffect(() => {
const fetchCounter = async () =>; {
嘗試{
設定載入（真）； // 開始載入
const 回應 =等待 fetch("/api/counter"); // 呼叫API取得計數器值
if (!response.ok) {
throw new Error("取得計數器時發生錯誤");
}
const data =等待response.json();
setCount(data.count); // 設定計數器值
} 捕獲（錯誤）{
setError(err.message); // 設定錯誤狀態
}最後{
設定載入（假）； // 停止載入
}
};

fetchCounter(); // Fetch the counter on mount

}, []); // 空依賴數組意味著它在 mount

上運行一次

如果（正在載入）返回

正在載入...;
如果（錯誤）回傳錯誤：{錯誤}；

返回（

計數器：{count}

);
}

導出預設計數器；

說明：

狀態管理：我們手動管理三種狀態：計數、載入和錯誤。

資料取得：fetchCounter 函數在 useEffect 掛鉤中定義，該函數在元件掛載（空依賴數組）上運行。

錯誤處理和載入：載入和錯誤狀態都需要明確處理。

重新取得：如果我們需要重新取得資料（例如，當使用者重新造訪頁面或視窗重新獲得焦點時），我們必須手動實作該邏輯。

場景 2：使用 React Query

在這裡，我們使用 React Query 來簡化資料擷取過程。 React Query 會自動處理快取、載入、錯誤和重新取得。

從「react」匯入React；
import { useQuery } from "react-query";

函數計數器() {
const { data, error, isLoading } = useQuery("counter", async () => {
const response = wait fetch("/api/counter");
if (!response.ok) {
throw new Error("取得計數器時發生錯誤");
}
返回response.json();
});

if (isLoading) 回傳

正在載入...;
如果（錯誤）回傳錯誤：{error.message}；

返回（

計數器：{data.count}

);
}

導出預設計數器；

說明：

狀態管理：React Query 自動管理狀態（載入、錯誤、資料）。無需明確設定載入或錯誤狀態。

資料取得：useQuery 鉤子簡化了取得。它會自動管理快取、後台更新和重試。

錯誤處理和載入：React Query 在內部處理這些，並且鉤子傳回 isLoading 和錯誤狀態，可以直接在 UI 中使用。

重新取得：當使用者重新造訪頁面或視窗取得焦點時，React Query 會自動重新取得資料。它還可以設定為每隔一段時間或根據自訂條件重新取得。

兩種方法的比較：

結論：

useEffect 非常適合處理自訂或一次性副作用，但在資料擷取方面，它需要手動狀態管理和更多樣板程式碼。

React Query 透過抽象載入、錯誤處理和快取等常見任務，顯著簡化了資料擷取。它非常適合您處理頻繁更改的資料或需要後台重新取得和快取等功能的場景。

以上是同時使用 useEffect 和 React Query 的反例的詳細內容。更多資訊請關注PHP中文網其他相關文章！