反応 http リクエストを配置する場所

React http リクエストは、非同期リクエスト用の操作用に、componentDidMount に配置する必要があります。同期状態変更の場合、React ネットワーク リクエストは、一般にあまり使用されない、componentWillMount に配置できます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応 http リクエストをどこに配置するか? React ネットワーク リクエストはどのライフサイクルに配置されるべきですか?

一般に、非同期リクエストの場合は、componentDidMount で操作するのが最善ですが、同期状態の変更の場合は、通常あまり使用されない、componentWillMount に配置できます。

componentWillMount でリクエストを開始すると早く結果が得られると考えている場合、この考えは実際には間違っています。通常、componentWillMount は、componentDidMount よりも何マイクロ秒も早くありません。ネットワーク上の遅延は、この差は無視できる程度です。

react のライフサイクルを見てください:

constructor() ----> componentWillMount() ----> render() ----> componentDidMount()

上記のメソッドは上から下に順番に呼び出されます。

コンストラクターは、コンポーネントをマウントする準備ができた最初の段階で呼び出されますが、この時点では、コンポーネントはまだ Web ページにマウントされていません。

componentWillMount メソッドは、コンストラクターの後でレンダリング前に呼び出されます。setState メソッドを呼び出すこのメソッド内のコードは再レンダリングをトリガーしないため、通常はデータのロードには使用されません。

componentDidMount メソッドのコードは、コンポーネントが Web ページに完全にマウントされた後にのみ呼び出されて実行されるため、データの読み込みが保証されます。さらに、このメソッドで setState メソッドを呼び出すと、再レンダリングがトリガーされます。したがって、このメソッドは外部データをロードしたり、他の副作用コードを処理したりするために正式に設計されています。コンポーネント上のデータと関係のない読み込みもコンストラクターで実行できますが、コンストラクターはデータの読み込みではなく、コンポーネントの状態の初期化を担当します。コンストラクターでは SetState を設定できず、読み込み時間が長すぎます。または、エラーが発生した場合、ページを読み込むことができません。したがって、副作用のあるコードは、componentDidMount メソッドに集中します。

概要:

1. サーバー側のレンダリング (同型性) に関連しており、componentWillMount でデータを取得すると、データの取得が 1 回と 2 回実行されます。サーバーはクライアント側で一度終了します。この問題は、componentDidMount で解決できます。componentWillMount も 2 回レンダリングされます。

2.componentWillMount でデータを取得する場合、レンダリング後にデータが到着する必要があるため、初期状態の設定を忘れると、ユーザー エクスペリエンスが低下します。

3. React16.0 以降では、componentWillMount が複数回実行される場合があります。

推奨される学習: 「react ビデオ チュートリアル 」

以上が反応 http リクエストを配置する場所の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。