useEffect と React Query の両方を使用した反例

useEffect と React Query の両方を使用して、React コンポーネントでデータを取得して表示する反例を見てみましょう。各アプローチがデータの取得と副作用をどのように処理するかに焦点を当てます。

API から現在のカウントを取得しており、このカウントはリアルタイムで更新されると仮定します。目標は、カウンターを表示し、API からの新しいデータでカウンターを更新し続けることです。

シナリオ 1: useEffect の使用

ここでは、useEffect を使用してカウンター データを取得し、状態を手動で処理します。

import React, { useState, useEffect } from "react";

関数 Counter() {
const [カウント, setCount] = useState(null); // カウンタを格納する状態
const [ロード中、setLoading] = useState(true); // ロード時の状態
const [エラー、setError] = useState(null); // エラー処理の状態

useEffect(() => {
const fetchCounter = async () => {
{
を試してください setLoading(true); // 読み込み開始
const 応答 = await fetch("/api/counter"); // カウンター値を取得するための API 呼び出し
if (!response.ok) {
throw new Error("カウンターの取得エラー");
}
const data = await response.json();
setCount(データ.カウント); // カウンタ値を設定します
} キャッチ (エラー) {
setError(err.message); // エラー状態を設定します
最後に {
setLoading(false); // ロードを停止
}
};

fetchCounter(); // Fetch the counter on mount

}, []); // 空の依存関係配列は、マウント時に 1 回実行されることを意味します

if (読み込み中) return

読み込み中...;
if (エラー) エラーを返す: {error};

戻る (

カウンター: {count}

);
}

デフォルトのカウンターをエクスポート;

説明:

状態管理: カウント、ロード、エラーの 3 つの状態を手動で管理します。

データの取得: fetchCounter 関数は useEffect フック内で定義され、コンポーネント マウント (空の依存関係配列) で実行されます。

エラー処理と読み込み: 読み込み状態とエラー状態の両方を明示的に処理する必要があります。

再フェッチ: データを再フェッチする必要がある場合 (ユーザーがページを再訪問したとき、またはウィンドウがフォーカスを取り戻した場合など)、そのロジックを手動で実装する必要があります。

シナリオ 2: React Query の使用

ここでは、React Query を使用してデータ取得プロセスを簡素化します。 React Query は、キャッシュ、ロード、エラー、再フェッチを自動的に処理します。

「反応」から React をインポート;
import { useQuery } from "react-query";

関数 Counter() {
const { データ、エラー、isLoading } = useQuery("counter", async () => {
const 応答 = await fetch("/api/counter");
if (!response.ok) {
throw new Error("カウンターの取得エラー");
}
return response.json();
});

if (isLoading) return

Loading...;
if (エラー) エラーを返す: {error.message};

戻る (

カウンター: {data.count}

);
}

デフォルトのカウンターをエクスポート;

説明:

状態管理: React Query は状態 (読み込み、エラー、データ) を自動的に管理します。ロードまたはエラーの状態を明示的に設定する必要はありません。

データの取得: useQuery フックにより、取得が簡素化されます。キャッシュ、バックグラウンド更新、再試行を自動的に管理します。

エラー処理と読み込み: React Query はこれらを内部的に処理し、フックは UI で直接使用できる isLoading とエラー状態を返します。

再フェッチ: React Query は、ユーザーがページに再度アクセスしたとき、またはウィンドウがフォーカスを取得したときに、データを自動的に再フェッチします。一定間隔で、またはカスタム条件に基づいて再取得するように設定することもできます。

2 つのアプローチの比較:

結論:

useEffect はカスタムまたは 1 回限りの副作用を処理するのに最適ですが、データの取得に関しては、手動の状態管理とより多くの定型コードが必要です。

React Query は、ロード、エラー処理、キャッシュなどの一般的なタスクを抽象化することで、データのフェッチを大幅に簡素化します。頻繁に変更されるデータを扱う場合や、バックグラウンドでの再フェッチやキャッシュなどの機能が必要なシナリオに最適です。

以上がuseEffect と React Query の両方を使用した反例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。