react でデータを取得する方法: 1. ライフサイクル メソッドを使用してデータをリクエストする; 2. フックを使用してデータを取得する; 3. サスペンドを使用してデータを取得する。
このチュートリアルの動作環境: Windows10 システム、react16、この記事はすべてのブランドのコンピューターに適用されます。
React でデータを取得するメソッド:
1. ライフサイクル メソッドを使用してデータをリクエストする
Application Employees.org 2 つのことを実行します:
1. プログラムに参加したらすぐに 20 人の従業員を雇用します。
2. 条件を絞り込んで従業員を絞り込むことができます。
これら 2 つの要件を実装する前に、react クラス コンポーネントの 2 つのライフサイクル メソッドを確認しましょう:
componentDidMount(): コンポーネントの後に実行されます。マウントされています
componentDidUpdate(prevProps): プロパティまたは状態が変更されたときに実行されます
Component< EmployeesPage>上記を使用します取得ロジックを実装するための 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>データを取得するための非同期メソッド fetch() があります。 get リクエストが完了したら、setState メソッドを使用して従業員を更新します。
this.fetch()componentDidMount() ライフサイクル メソッドで実行されます。コンポーネントが最初にレンダリングされるときに従業員データを取得します。
キーワードがフィルタリングされると、props.query が更新されます。 props.query が更新されるたびに、componentDidUpdate() は this.fetch() を再実行します。
ライフサイクル メソッドは比較的簡単に習得できますが、クラスベースのメソッドには定型コードがあり、再利用が困難です。
利点
このメソッドは理解しやすいです: componentDidMount()最初のレンダリングでデータを取得し、componentDidUpdate( )プロパティが更新されたときにデータを再取得します。
欠点
ボイラー コード
クラスベースのコンポーネントは React.Component を継承し、コンストラクターで super(props)# を実行する必要があります＃＃など
componentDidMount()componentDidUpdate() のコードはほとんどが繰り返されています。
2. フックを使用してデータを取得する
フックは、クラスに基づいてデータを取得する場合に適した選択肢です。フックは単純な関数であるため、クラス コンポーネントのように継承する必要がなく、再利用が容易です。useEffect(callback[, deps]) フックを簡単に思い出してください。このフックはマウント後にコールバックを実行し、依存関係の依存関係が変更されたときに再レンダリングします。
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() がデータを取得する方法を確認します。
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> には、対応する取得ロジックがなく、インターフェイスのレンダリングのみを担当します。
利点
欠点
事前知識が必要フックは少し直観に反しているため、使用する前に理解する必要があります、フック依存関係のクロージャーがあるため、それらをよく理解してください。必要性
フックを使用しても、データ取得を実行するには命令型アプローチを使用する必要があります。 Foshan vi デザイン https://www.houdianzi.com/fsvi/ Pea リソース検索ディレクトリ https://55wd.com3. サスペンスを使用してデータを取得する
Suspense は、React でデータを非同期的に取得する宣言的な方法を提供します。 注: 2019 年 11 月の時点で、サスペンスは実験段階にあります。非同期操作を実行するパッケージ コンポーネント: <Suspense fallback={<span>Fetch in progress...</span>}>
<FetchSomething />
</Suspense>
をレンダリングします。
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>Suspense 処理コンポーネントを使用して、取得したデータを コンポーネントに渡します。
resource.employees は、舞台裏で Suspense と通信する特別にラップされた Promise です。このようにして、Suspense は
最大の利点は、Suspense が非同期操作を宣言的かつ同期的な方法で処理することです。コンポーネントには複雑なデータ取得ロジックはありませんが、宣言的な方法でリソースを使用してコンテンツをレンダリングします。コンポーネント内にはライフサイクルはなく、フック、非同期/待機、コールバックはなく、表示インターフェイスのみです。
利点
宣言的
Suspense は、React で宣言的な方法で非同期操作を実行します。
シンプル
宣言型コードは使いやすく、これらのコンポーネントには複雑なデータ取得ロジックはありません。
疎結合とフェッチの実装
Suspense を使用するコンポーネントでは、データの取得方法がわかりません。REST または GraphQL を使用します。サスペンスは、フェッチの詳細がコンポーネントに漏洩しないように境界を設定します。
標準ステータス
複数の取得操作が要求された場合、Suspense は最新の取得要求を使用します。
4. 概要
長い間、データを取得する方法に対する唯一の解決策はライフサイクル メソッドでした。ただし、これらを使用してデータを取得するには、多くの定型コード、重複、再利用性の問題が伴います。
関連する無料学習の推奨事項: JavaScript (ビデオ)
以上がReactでデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
