React でのデータの取得-jsチュートリアル-php.cn

Data Fetching in React

データの取得は React アプリケーションの基礎であり、ユーザーデータのロード、コンテンツの動的レンダリングなどの機能を強化します。 React は、アプリの複雑さとパフォーマンスのニーズに応じて選択できるさまざまなライブラリとアプローチを備えた、データ処理のための柔軟なエコシステムを提供します。この記事では、Fetch API、Axios、Async/Await、React Query、SWR、GraphQL など、React でデータをフェッチするためのいくつかの主要なメソッドについて説明します。

1. Fetch API を使用したデータの取得

Fetch API は、ネットワークリクエストを簡素化する組み込み Web API であり、最新のブラウザで広くサポートされています。 API リクエストからのデータを表す Response オブジェクトで解決される Promise を返します。

例

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

ログイン後にコピー

フェッチ API を使用する場合

小規模プロジェクト、または基本的なデータ取得が必要なプロジェクト。
ブラウザベースのアプリとの最小限の依存関係と互換性。

2. データの取得に Axios を使用する

Axios は、ブラウザーおよび Node.js 用の Promise ベースの HTTP クライアントであり、リクエストとレスポンスのインターセプターや、リクエストとレスポンスを変換する機能など、Fetch API よりも多くの機能を提供します。

例

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

ログイン後にコピー

Axios の利点

Fetch API を完全にはサポートしていない可能性がある古いブラウザをサポートします。
HTTP エラーコードを拒否することで、より適切なエラー処理を提供します。
リクエストとレスポンスの変換が簡単にできるため、より大規模で複雑なアプリケーションで人気があります。

3. 可読性を高めるために Async/Await 構文を使用する

async と await を使用すると、JavaScript での非同期コードの処理がはるかに簡単になりました。 Fetch API と Axios の両方を async/await 構文で使用すると、コードが読みやすくなります。

フェッチを使用した例

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

ログイン後にコピー

非同期/待機の利点

可読性が向上し、Promise チェーンよりも扱いやすくなります。
エラー処理に try/catch ブロックを使用できるようにします。

4. React Query: 強力なデータのフェッチおよびキャッシュライブラリ

React Query はサーバー状態のキャッシュ、同期、更新を処理し、データのフェッチ、更新、キャッシュを簡単に行うことができます。 React Query は自動データキャッシュと再フェッチ機能を備えているため、複雑なアプリケーションでよく使用されます。

例

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

ログイン後にコピー

React クエリの利点

データのキャッシュとバックグラウンドの更新。
API と適切に統合し、ネットワーク障害の再試行ロジックを処理します。
読み込み、エラー、状態の再取得を管理するためのコードを削減します。

5. Vercel の SWR (Stale-while-Revalidate)

SWR は、キャッシュと再検証戦略を優先するもう 1 つのデータ取得ライブラリです。 Vercel によって開発された SWR は、ユーザーがページを再訪問するたびにバックグラウンドでデータを自動的に再取得することで、データを最新の状態に保ちます。

例

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

ログイン後にコピー

SWRのメリット

バックグラウンドでの自動再検証を伴うキャッシュファーストのデータ取得を使用します。
一般的なバックエンドフレームワークおよび RESTful API と統合します。
最小限のコードでデータを最新の状態に保つ必要があるアプリケーションに最適です。

6. GraphQL を使用したデータの取得

GraphQL は、返されるデータをより詳細に制御できる API のクエリ言語です。これにより、必要なフィールドのみをフェッチできるようになり、オーバーフェッチやアンダーフェッチが減ってパフォーマンスが向上します。

Apollo クライアントを使用した例

Apollo クライアントを使い始めるには、npm install @apollo/clientgraphql を実行してインストールします。

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

ログイン後にコピー