web-dev-qa-db-ja.com

componentWillMountを使用すべきではないのはなぜですか?

ComponentWillMountライフサイクルメソッドでデータを取得するためのサーバー呼び出しを実行するのは悪い習慣ですか?

そして、なぜcomponentDidMountを使用したほうが良いのでしょうか。

24
Lokesh Agrawal

引用 @ Dan Abramov

future version Reactでは、componentWillMountが複数回発生することが予想されますので、ネットワーク要求にはcomponentDidMountを使用する必要があります。

続きを読む こちら

19
Lyubomir

更新-5月/ 2018
async rendering と呼ばれる作業進行中に反応するための新しい機能があります。
反応v16.3.2これらのメソッドは使用するには「安全」ではありません。

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

詳細については、 docs を参照してください。


一般的なルールとして 使用しないでくださいcomponentWillMount(es6 class構文を使用する場合)。代わりにconstructorメソッドを使用してください。
このライフサイクルメソッドは、同期状態の初期化に適しています。
一方、 componentDidMountは非同期状態の操作に適しています。

なぜ
まあ、constructor/componentWillMountで非同期要求を行うときは、非同期操作が完了するまでにrenderが呼び出される前に行いますrenderメソッドはおそらく既に終了しており、この段階で「初期状態」を設定するポイントはないでしょうか。
これがあなたのケースであるかどうかはわかりませんが、開発者がcomponentWillMountで非同期に状態を開始したいケースのほとんどは、2番目のrender呼び出しを避けるためです。ただし、上記のように、非同期操作が終了する前にrenderが起動することは避けられません。
したがって、非同期操作を呼び出す最適なタイミングは、renderが呼び出され、コンポーネントがマウントされた後です(nullまたは空の<div/>)その後、データを取得し、状態を設定して、それぞれ再レンダリングします。

18
Sagiv b.g

componentDidMountは、次の2つの理由から、データを取得するための呼び出しを行うのに最適な場所です。

  1. componentDidMountを使用すると、最初のレンダリングが完了するまでデータがロードされないことが明確になります。初期状態を適切に設定する必要があるため、エラーの原因となるundefined状態を取得しないでください。

  2. サーバー上でアプリをレンダリングする必要がある場合、componentWillMountが2回(サーバー上とクライアント上で)呼び出されますが、これはおそらく望んでいないことです。データ読み込みコードをcomponentDidMountに配置すると、データはクライアントからのみフェッチされます。一般に、componentWillMountに副作用を追加しないでください。

6
mradziwon

私がそれを理解する方法、最大の理由の1つは開発者に正しい期待を設定するコードを読むことに関係しています。

componentWillMountを使用する場合、フェッチに時間がかかると考えるのは魅力的です。コンポーネントは「did」マウントし、then最初のレンダリングが行われます。しかし、そうではありません。非同期呼び出し(Promisesを使用したAPI呼び出しなど)を行う場合、コンポーネントは、フェッチが返されてコンポーネントの状態を設定(またはReduxの状態を変更)する前に、実際にrenderを実行します。

代わりにcomponentDidMountを使用する場合、データを取得する前にコンポーネントが少なくとも1回レンダリングされることは明らかです(コンポーネントが既にdidマウント)。したがって、拡張により、コンポーネントが最初の(「空の」)レンダリングで壊れないように初期状態を処理する必要があることも明らかです。

2
jonahe

コンポーネントのマウントライフサイクルは

  • コンストラクタ()
  • componentWillMount()/ UNSAFE_componentWillMount()(react 16)
  • render()
  • componentDidMount()

ConstructorおよびcomponentWillMountは両方とも、ページのレンダリングを担当するrender()呼び出しの前に呼び出します。

ここで、初期化された状態はコンストラクタで実行され、apiは非同期呼び出しのためにcomponentDidMountで呼び出されます。

ComponentWillMountは、ES6以前の初期化状態に適していましたコンストラクターが存在しなかった場合。しかし、ComponentWillMountは何の役にも立たず、反応チームは反応17の後でそれを考えています。

さらに上記に、reactがreactに移動 ファイバーアーキテクチャ 、不必要な再レンダリングを回避し、パフォーマンスを向上させるために、reactはcomponentWillMount、componentWillRecivePropsおよびcomponentWillUpdateメソッドから移動することを決定しました。

2