ComponentWillMountライフサイクルメソッドでデータを取得するためのサーバー呼び出しを実行するのは悪い習慣ですか?
そして、なぜcomponentDidMountを使用したほうが良いのでしょうか。
future version Reactでは、componentWillMountが複数回発生することが予想されますので、ネットワーク要求にはcomponentDidMountを使用する必要があります。
続きを読む こちら 。
更新-5月/ 2018
async rendering と呼ばれる作業進行中に反応するための新しい機能があります。
反応v16.3.2
これらのメソッドは使用するには「安全」ではありません。
詳細については、 docs を参照してください。
一般的なルールとして 使用しないでくださいcomponentWillMount
(es6 class
構文を使用する場合)。代わりにconstructor
メソッドを使用してください。
このライフサイクルメソッドは、同期状態の初期化に適しています。
一方、 componentDidMount
は非同期状態の操作に適しています。
なぜ?
まあ、constructor
/componentWillMount
で非同期要求を行うときは、非同期操作が完了するまでにrender
が呼び出される前に行いますrender
メソッドはおそらく既に終了しており、この段階で「初期状態」を設定するポイントはないでしょうか。
これがあなたのケースであるかどうかはわかりませんが、開発者がcomponentWillMount
で非同期に状態を開始したいケースのほとんどは、2番目のrender
呼び出しを避けるためです。ただし、上記のように、非同期操作が終了する前にrender
が起動することは避けられません。
したがって、非同期操作を呼び出す最適なタイミングは、render
が呼び出され、コンポーネントがマウントされた後です(null
または空の<div/>
)その後、データを取得し、状態を設定して、それぞれ再レンダリングします。
componentDidMount
は、次の2つの理由から、データを取得するための呼び出しを行うのに最適な場所です。
componentDidMount
を使用すると、最初のレンダリングが完了するまでデータがロードされないことが明確になります。初期状態を適切に設定する必要があるため、エラーの原因となるundefined
状態を取得しないでください。
サーバー上でアプリをレンダリングする必要がある場合、componentWillMount
が2回(サーバー上とクライアント上で)呼び出されますが、これはおそらく望んでいないことです。データ読み込みコードをcomponentDidMount
に配置すると、データはクライアントからのみフェッチされます。一般に、componentWillMount
に副作用を追加しないでください。
私がそれを理解する方法、最大の理由の1つは開発者に正しい期待を設定するコードを読むことに関係しています。
componentWillMount
を使用する場合、フェッチに時間がかかると考えるのは魅力的です。コンポーネントは「did」マウントし、then最初のレンダリングが行われます。しかし、そうではありません。非同期呼び出し(Promisesを使用したAPI呼び出しなど)を行う場合、コンポーネントは、フェッチが返されてコンポーネントの状態を設定(またはReduxの状態を変更)する前に、実際にrender
を実行します。
代わりにcomponentDidMount
を使用する場合、データを取得する前にコンポーネントが少なくとも1回レンダリングされることは明らかです(コンポーネントが既にdidマウント)。したがって、拡張により、コンポーネントが最初の(「空の」)レンダリングで壊れないように初期状態を処理する必要があることも明らかです。
コンポーネントのマウントライフサイクルは
ConstructorおよびcomponentWillMountは両方とも、ページのレンダリングを担当するrender()呼び出しの前に呼び出します。
ここで、初期化された状態はコンストラクタで実行され、apiは非同期呼び出しのためにcomponentDidMountで呼び出されます。
ComponentWillMountは、ES6以前の初期化状態に適していましたコンストラクターが存在しなかった場合。しかし、ComponentWillMountは何の役にも立たず、反応チームは反応17の後でそれを考えています。
さらに上記に、reactがreactに移動 ファイバーアーキテクチャ 、不必要な再レンダリングを回避し、パフォーマンスを向上させるために、reactはcomponentWillMount、componentWillRecivePropsおよびcomponentWillUpdateメソッドから移動することを決定しました。