どの方法が反応して、データ収集のために、より適しているのですか？

著者：ドミトリPavlutinの
翻訳：小さな次元FE
オリジナル：dmitripavlutin.com

外国の記事は、著者は、記事の読みやすさを確保するために言い換え方法を使用しています。

このような画像データ取得I / O操作を実行するときは、最終的なレンダリングの状態データを保存するための取得要求、応答を待ち、応答コンポーネントを開始しなければなりません。非同期のデータ取得が徐々にこの余分な作業を最小限に抑えるために改善されている反応し、反応させ、宣言型を適応させるために追加の作業が必要になります。ライフサイクル機能、フックとサスペンスが、私は、次の例では、それぞれ、自分の長所と短所を議論する、データを取得するように反応しています。あなただけがより良いコードで非同期動作を達成するのを助けるために、各モードの詳細を理解することによって。

1.データのライフサイクルを取得する関数を使用

次のアプリケーションは、2つのことを行う必要があります。

（1）初期設定は、会社の従業員20人を得ます。

クエリが含まれている従業員の名前うち（2）フィルタ。

これらの要件を実装する前に、ライフサイクル・アプローチのクラスの2つのコンポーネントを確認します。

（1） componentDidMount()：実行した後にアセンブリマウント。

（2） componentDidUpdate(prevProps)：ときpropsとstate実行時間が変化します。
<EmployeesPage>データ収集ロジックのライフサイクルを達成するために、これらの二つの機能を使用します：

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>Fetching employees....</div>;
    }
    return <EmployeesList employees={employees} />;
  }
}

オープン例探検する<EmployeesPage>データを取得する方法。<EmployeesPage>非同期があるfetchデータを得るために使用される方法は、取得されたときに取得された使用して達成employees更新をコンポーネントの状態を。this.fetch()ではcomponentDidMount()、実装のライフサイクル機能：コンポーネントの初期化レンダリングが完了すると、従業員データを取得開始。
ユーザが入力ボックスにクエリを入力すると、queryプロパティの変更が発生し、それが変化するたびに、this.fetch()両方ともうcomponentDidUpdate従業員のスクリーニング機能を実現することは、機能ライフサイクル行います。ライフサイクル・アプローチは、比較的容易に把握することですが、が、クラスに基づいて定型的なコードの再利用性と難しさがあります。

長所：
簡単。比較的容易に理解するために：ライフサイクル方法はcomponentDidMountとき、最初のレンダリングコンポーネントの初期化後にデータを取得するための要求を開始しprops、時間によって変化がcomponentDidUpdateデータを取得します。

短所：

（1）定型コード。以下のようなコンポーネントベースのコード「授賞式の意味」を持つ：継承React.Componentし、する必要constructorのコールをsuper(props)、というように。

（2）この問題。このキーワードのトラブルの多くを使用します。

（3）コードが繰り返されます。中componentDidMountおよびcomponentDidUpdateそれらのほとんどは、反復されている実際のコード。

（4）それは再利用することは困難です。それは再利用することは困難であった他のコンポーネントである場合は論理の従業員を取得します。

2.フックがデータを取得します

クラスベースのコンポーネントであるために、フックがより良い選択です。通常の関数に関しては、フックのコードは、「儀式の感覚」と再利用が容易に放棄しました。
私たちは、最初のを見てuseEffect(callback[, deps])フック関数を使用します。内フック関数実行は、アセンブリ取付けcallback依存する場合、deps変更後は、後続のレンダリングを実行していきます。以下の例で<EmployeesPage>使用しuseEffect()た従業員データを取得します：

import React, { useState } from 'react';

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} />;
}

オープン例を見ては、useEffect()データを取得する方法です。あなたは利用見ることができるuseEffect()非常に単純化されたコンポーネントのクラスよりもバージョンのを。EmployeesPage機能コンポーネントuseEffect(fetch, [query])最初のレンダリングコンポーネントの後に実行されるfetchコールバック、およびのみqueryプロパティの変更後に、コンポーネントが再レンダリングした後に再度実行されるfetchコールバック。しかし、我々はまだ改善の余地があり、フックはあなたから論理的なスタッフを取得することができ<EmployeesPage>、抽出、我々はみます：

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>任意の適切なデータ取得・ロジックを統合ではなく、彼の最も直接的な仕事に焦点を当てていない：UIのレンダリング。さらに重要なのは、あなたが従業員データを得るために必要なコンポーネントのいずれかで再利用できるということですuseEmployeesFetch()。
利点

（1）単純明快。彼らは単に通常の関数であるとして、フック定型コードが結合されていません。

（2）再利用。データ収集ロジックに実装フックが容易に多重化されています。
短所

（1）参入障壁。あなたは、使用する前に、それらを理解する必要があり、少し直感に反するフック、フックが依存しているクロージャをあなたはまた、それらを明確にする必要がありますので、。

（2）が不可欠。使用フックは、あなたはまだデータ収集を実行するためのコマンド形式の方法を使用する必要があります。

3.サスペンスは、データを取得します

サスペンスで非同期にデータを取得反応するように宣言的な方法を提供します。
<Suspense>パッケージ組立非同期操作を実行します：

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

データを取得した場合、サスペンスがレンダリングされますfallbackコンテンツのプロパティを。データ収集が完了すると、サスペンス取得したデータをレンダリングするために使用される<FetchSomething />アセンブリを。のは、従業員がアプリケーションにサスペンスを使用する方法を見てみましょう：

import React, { Suspense } from "react";
import EmployeesList from "./EmployeesList";

function EmployeesPage({ resource }) {
  return (
    <Suspense fallback={<h1>Fetching employees....</h1>}>
      <EmployeesFetch resource={resource} />
    </Suspense>
  );
}

function EmployeesFetch({ resource }) {
  const employees = resource.employees.read();
  return <EmployeesList employees={employees} />;
}

オープンの例では、どのようにサスペンス作品をチェックします。<EmployeesPage>使用のためのサスペンス処理コンポーネント<EmployeesFetch>、データ取得ロジックです。特別で包ま約束背景とサスペンスで通信するために、あなたがサスペンスに知ることができ、このように長い一時停止し、代わりにリソースがレンダリングを継続する際に知ってレンダリングされる前に。<EmployeesFetch>resource.employees<EmployeesFetch>

最大のハイライトは：サスペンスは宣言方式と非同期操作を同期するプロセスを使用しています。

これらのコンポーネントは、彼らが宣言コンテンツをレンダリングするためにリソースを使用する代わりに、任意のデータ関連する詳細情報を取得していない自分自身を統合します。いいえライフサイクル機能なし、フック、ノー非同期/のawait、またコールバック内部の部品に：ちょうどレンダリングリソース。
長所：

（1）宣言。サスペンスは、あなたが非同期操作が宣言的な方法に反応を実行することができます。

（2）単純明快。宣言コードは、それ自体がデータ取得の詳細に関係していない、より単純な、コンポーネントを使用します。

（3）取得ロジック疎結合。コンポーネントの使用がサスペンスなので、それ自体は、データを取得する方法を知っていない：それはRESTまたはGraphQL使用しています。内部コンポーネントに漏れる取得したデータを保護するための1つのサスペンス設定境界の詳細。

（4）無競合状態。両方のオープン複数の非同期操作が取得した場合は、最新の取得要求とサスペンス。
欠点：
必要アダプタ。サスペンス必要性は、そのプロのフェッチフェッチ・インタフェース・ライブラリまたはアダプタを達成しました。

4.まとめ

長い時間のために一度のライフサイクル機能は、データ取得の唯一の手段です。しかし、このような大規模なこのように定型コードの量、繰り返しや再利用が難しいなどの問題の多くをもたらすでしょう。データを取得するために使用フックは、より良い選択です：私たちは、定型コードの多くを削減しました。利点のサスペンスは、データへの宣言型のアクセスでは、コンポーネント自体の詳細を気にしないサスペンスが最も近い自体が宣言型のアイデアに反応している間、データを取得しました。

あなたがそれを好むデータを取得するにはどっち？

オリジナル：https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/

5. AC

今日では、主な方法は、我々は非同期操作で、より便利なことができるように目指した、いくつかのデータ収集と各アプローチの長所と短所の比較のシェアを反応し、私たちはお互いの技術と議論したいと考えています、について話すことができます。

記事が同期するように更新されているのGithubのブログを記事はまだ感じることができれば、主演気軽に！

親指の一つは、私は多くの努力に値します！

逆境の顔が成長し、唯一のより良い自分自身、そして相互の励ましの王になるために勉強し続けるために！