web-dev-qa-db-ja.com

コンストラクターvs componentWillMount; componentWillMountができること、コンストラクターができないことは何ですか？

私が見る限り、componentWillMountができることとconstructorができないことは、setStateを呼び出すことだけです。

_componentWillMount() {
    setState({ isLoaded: false });
}
_

まだrenderを呼び出していないので、setStateのcomponentWillMountは、最初のrender()パスに入る前に状態オブジェクトを準備します。これは、本質的にconstructorと同じことです：

_constructor(props) {
    super(props);
    this.state = { isLoaded: false };
}
_

しかし、（サーバー側で）componentWillMountが便利な別のユースケースがあります。

非同期のものを考えてみましょう：

_componentWillMount() {
    myAsyncMethod(params, (result) => {
        this.setState({ data: result });
    })
}
_

ここで、constructorを_this.state_への割り当てとして使用することはできません。render()はトリガーされません。

setStateのcomponentWillMountはどうですか？ React docs ：によると

componentWillMount()は、マウントが発生する直前に呼び出されます。 _render(_）の前に呼び出されるため、このメソッドで状態を設定しても再レンダリングはトリガーされません。このメソッドに副作用やサブスクリプションを導入しないでください。

したがって、ここではReactは最初のレンダリングに新しい状態値を使用し、再レンダリングを回避します。

質問1：これは、componentWillMount内で、非同期メソッドのコールバックでsetStateを呼び出す場合promiseコールバック）、React）コールバックが実行されるまで初期レンダリングをブロックします？

この設定をclient-side（はい、サーバーサイドレンダリングでのユースケースを見る）、上記が当てはまる場合、私はしません私の非同期メソッドが完了するまで何でも見ることができます。

コンセプトがありませんか？

質問2：componentWillMountのみで達成できる他のユースケースはありますが、constructorは使用しませんおよびcomponentDidMount？

javascriptclassreactjsconstructorecmascript-6
37
Yadhu Kiran

これは、componentWillMount内で、非同期メソッドのコールバックでsetStateを呼び出す（promiseコールバックにすることができる）場合、Reactはコールバックが実行されるまで初期レンダリングをブロックしますか？

いいえ、ここ を参照してください。

次のコードはレンダリングをブロックしません（これはsetStateを呼び出すアンチパターンであることに注意してください）

_componentWillMount: function() {
     new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve();
        }, 2000)
     }).then(() => this.setState({ promiseResult: 'World' }));
  },
_

質問2：componentWillMountでのみ達成できるその他のユースケースはありますが、コンストラクターとcomponentDidMountは使用しませんか？

いいえ、ES6クラスの場合、componentWillMountを破棄できます。 React.createClass({... })を使用する場合にのみ必要です

編集：どうやら、私は間違っています。これを指摘してくれた@ Swapnil に感謝します。 discussion です。

Reactは、constructorに副作用があり、別のコンポーネントの状態を変更すると警告をスローします。これは、setState自体のconstructorと、潜在的にrender()が呼び出されています。したがって、constructorに副作用はありません。

これは、componentWillMountで行う場合には当てはまりません。エラーはスローされません。一方、facebookの人たちもcomponentWillMountの副作用を思いとどまらせています。したがって、副作用がない場合は、constructorの代わりにcomponentWillMountを使用できます。副作用については、componentDidMountの代わりにcomponentWillMountを使用することをお勧めします。いずれにしても、componentWillMountは必要ありません。

16
Lyubomir