Reactでデータを取得する方法

react でデータを取得する方法: 1. ライフサイクル メソッドを使用してデータをリクエストする; 2. フックを使用してデータを取得する; 3. サスペンドを使用してデータを取得する。

このチュートリアルの動作環境: Windows10 システム、react16、この記事はすべてのブランドのコンピューターに適用されます。

React でデータを取得するメソッド:

1. ライフサイクル メソッドを使用してデータをリクエストする

Application Employees.org 2 つのことを実行します:

1. プログラムに参加したらすぐに 20 人の従業員を雇用します。

2. 条件を絞り込んで従業員を絞り込むことができます。

これら 2 つの要件を実装する前に、react クラス コンポーネントの 2 つのライフサイクル メソッドを確認しましょう:

• componentDidMount(): コンポーネントの後に実行されます。マウントされています

• componentDidUpdate(prevProps): プロパティまたは状態が変更されたときに実行されます

Component上記を使用します取得ロジックを実装するための 2 つのライフ サイクル メソッド:

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";
class EmployeesPage extends Component {
  constructor(props) {
    super(props);
    this.state = { employees: [], isFetching: true };
  }
  componentDidMount() {
    this.fetch();
  }
  componentDidUpdate(prevProps) {
    if (prevProps.query !== this.props.query) {
      this.fetch();
    }
  }
  async fetch() {
    this.setState({ isFetching: true });
    const employees = await fetchEmployees(this.props.query);
    this.setState({ employees, isFetching: false });
  }
  render() {
    const { isFetching, employees } = this.state;
    if (isFetching) {
      return <div>获取员工数据中...</div>;
    }
    return <EmployeesList employees={employees} />;
  }
}

コードサンドボックスを開いて、<employeespage></employeespage> 取得プロセスを表示します。

<employeespage></employeespage>データを取得するための非同期メソッド fetch() があります。 get リクエストが完了したら、setState メソッドを使用して従業員を更新します。

this.fetch()componentDidMount() ライフサイクル メソッドで実行されます。コンポーネントが最初にレンダリングされるときに従業員データを取得します。

キーワードがフィルタリングされると、props.query が更新されます。 props.query が更新されるたびに、componentDidUpdate() は this.fetch() を再実行します。

ライフサイクル メソッドは比較的簡単に習得できますが、クラスベースのメソッドには定型コードがあり、再利用が困難です。

利点

このメソッドは理解しやすいです: componentDidMount()最初のレンダリングでデータを取得し、componentDidUpdate( )プロパティが更新されたときにデータを再取得します。

欠点

ボイラー コード

クラスベースのコンポーネントは React.Component を継承し、コンストラクターで super(props)# を実行する必要があります＃＃など

this: this キーワードを使用するのは面倒です。

コードの重複

componentDidMount()componentDidUpdate() のコードはほとんどが繰り返されています。

再利用が難しい

従業員獲得ロジックを別のコンポーネントで再利用するのは困難です。

2. フックを使用してデータを取得する

フックは、クラスに基づいてデータを取得する場合に適した選択肢です。フックは単純な関数であるため、クラス コンポーネントのように継承する必要がなく、再利用が容易です。

useEffect(callback[, deps]) フックを簡単に思い出してください。このフックはマウント後にコールバックを実行し、依存関係の依存関係が変更されたときに再レンダリングします。

次の例に示すように、 で useEffect() を使用して従業員データを取得します:

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";
function EmployeesPage({ query }) {
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);
  useEffect(function fetch() {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

codesandbox を開いて、useEffect() がデータを取得する方法を確認します。

Hooks の を使用する方が、クラス コンポーネントを使用するよりもはるかに簡単であることがわかります。

関数コンポーネントの

useEffect(fetch, [query]) では、最初のレンダリングの後にフェッチ コールバックが実行されます。さらに、依存関係クエリが更新されると、fetch メソッドも再実行されます。

しかし、最適化の余地はまだあります。フックを使用すると、 コンポーネントから従業員取得ロジックを抽出できます。見てみましょう:

import React, { useState } from 'react';
import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";
function useEmployeesFetch(query) { // 这行有变化
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);
  useEffect(function fetch {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);
  return [isFetching, employees];
}
function EmployeesPage({ query }) {
  const [employees, isFetching] = useEmployeesFetch(query); // 这行有变化
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

useEmployeesFetch() から必要な値を指定します。コンポーネント <employeespage> には、対応する取得ロジックがなく、インターフェイスのレンダリングのみを担当します。 </employeespage>

さらに良いことに、 useEmployeesFetch() は、従業員を取得する必要がある他のコンポーネントで再利用できます。

利点

• 明瞭かつシンプル。フックは通常の関数であるため、定型的なコードはありません。

• 再利用性。フックに実装されたデータ取得ロジックは簡単に再利用できます。

欠点

事前知識が必要

フックは少し直観に反しているため、使用する前に理解する必要があります、フック依存関係のクロージャーがあるため、それらをよく理解してください。

必要性

フックを使用しても、データ取得を実行するには命令型アプローチを使用する必要があります。

Foshan vi デザイン https://www.houdianzi.com/fsvi/ Pea リソース検索ディレクトリ https://55wd.com

3. サスペンスを使用してデータを取得する

Suspense は、React でデータを非同期的に取得する宣言的な方法を提供します。

注: 2019 年 11 月の時点で、サスペンスは実験段階にあります。

非同期操作を実行するパッケージ コンポーネント:

<Suspense fallback={<span>Fetch in progress...</span>}>
  <FetchSomething />
</Suspense>

データが取得されると、Suspense はフォールバックでコンテンツを表示します。データを取得した後、Suspense は取得したデータを使用して

をレンダリングします。

Suspense の使用方法を見てみましょう:

import React, { Suspense } from "react";
import EmployeesList from "./EmployeesList";
function EmployeesPage({ resource }) {
  return (
    <Suspense fallback={<h1 id="Fetching-nbsp-employees">Fetching employees....</h1>}>
      <EmployeesFetch resource={resource} />
    </Suspense>
  );
}
function EmployeesFetch({ resource }) {
  const employees = resource.employees.read();
  return <EmployeesList employees={employees} />;
}

コードサンドボックスを開いて、Suspense がデータを取得する方法を確認してください。

Suspense 処理コンポーネントを使用して、取得したデータを コンポーネントに渡します。

の resource.employees は、舞台裏で Suspense と通信する特別にラップされた Promise です。このようにして、Suspense は のレンダリングを「一時停止」するのにどれくらいの時間がかかるかを把握し、リソースの準備ができたらレンダリング作業を開始できます。

最大の利点は、Suspense が非同期操作を宣言的かつ同期的な方法で処理することです。コンポーネントには複雑なデータ取得ロジックはありませんが、宣言的な方法でリソースを使用してコンテンツをレンダリングします。コンポーネント内にはライフサイクルはなく、フック、非同期/待機、コールバックはなく、表示インターフェイスのみです。

利点

宣言的

Suspense は、React で宣言的な方法で非同期操作を実行します。

シンプル

宣言型コードは使いやすく、これらのコンポーネントには複雑なデータ取得ロジックはありません。

疎結合とフェッチの実装

Suspense を使用するコンポーネントでは、データの取得方法がわかりません。REST または GraphQL を使用します。サスペンスは、フェッチの詳細がコンポーネントに漏洩しないように境界を設定します。

標準ステータス

複数の取得操作が要求された場合、Suspense は最新の取得要求を使用します。

4. 概要

長い間、データを取得する方法に対する唯一の解決策はライフサイクル メソッドでした。ただし、これらを使用してデータを取得するには、多くの定型コード、重複、再利用性の問題が伴います。

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がReactでデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。