useEffect と React Query の両方を使用した反例-jsチュートリアル-php.cn

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

DDD

リリース： 2024-09-18 18:24:32

オリジナル

656 人が閲覧しました

Counter example using both useEffect and 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};

戻る (