Reactコンポーネントを使用したコンストラクターを理解する

コンストラクターは、クラスからオブジェクトを作成するときに自動的に呼び出されるメソッドです。 オブジェクトの一部のプロパティをデフォルト設定したり、渡された引数を健全性チェックしたりするなど、初期設定を処理できます。 簡単に言えば、コンストラクターは物事の構築を支援します。

Reactでは、コンストラクターも例外ではありません。 イベントハンドラーをコンポーネントにバインドしたり、コンポーネントのローカル状態を初期化したりするために使用できます。 constructor()メソッドは、コンポーネントがマウントされる前に起動され、Reactのほとんどのものと同様に、それらを使用するときに従う必要のあるいくつかのルールがあります。

this.propsを使用する前に、super(props)に電話してください

コンストラクターの性質上、ゲートのすぐ外ではthis.propsオブジェクトは使用できず、バグが発生する可能性があります。 このコンストラクターはエラーをスローします：

constructor() {
  console.log(this.props);
}

代わりに、constructor()からprops値を取得し、それをsuper()メソッドに渡します。

constructor(props) {
  super(props);
  console.log(this.props);
}

super()メソッドを呼び出すと、親クラスのコンストラクターが呼び出されます。親クラスの場合、Reactコンポーネントの場合はReact.Componentです。

constructor()内でsetState()を呼び出さないでください

コンポーネントのコンストラクターは、コンポーネントの初期状態を設定するのに最適な場所です。 クラスの他のメソッドで使用するようにsetState()を使用する代わりに、初期状態を直接設定する必要があります。

constructor(props) {
  super(props);

  this.state = {
    reptile: 'alligator',
    color: '#008f68',
  };
}

コンストラクターは、そのようにローカル状態を直接割り当てる必要がある唯一の場所です。 コンポーネント内の他の場所では、代わりにsetState()を使用する必要があります。

this.propsからthis.stateに値を割り当てることは避けてください

コンストラクターでコンポーネントの初期状態を設定するときは、プロパティから値を設定しないようにする必要があります。

あなたがこのようなことをするとき：

constructor(props) {
  super(props);

  this.state = {
    reptile: props.reptile,
  };
}

後でsetState()を実行して、プロパティを更新する機能が失われます。

プロパティを状態に直接割り当てる代わりに、this.props.reptileを呼び出すことで、コード内でプロパティを直接参照できます。

イベントをすべて1か所にバインド

実際にはルールや落とし穴ではありませんが、コンストラクターでイベントハンドラーを簡単にバインドできることに注意してください。

constructor(props) {
  super(props);

  this.state = {
    // Sets that initial state
  };

  // Our event handlers
  this.onClick = this.onClick.bind(this);
  this.onKeyUp = this.onKeyUp.bind(this);
  // et cetera...
}

constructor()で副作用やサブスクリプションを使用しないでください

わかりました。新しいコンポーネントを作成したばかりで、APIからデータを取得して、値を状態に設定する必要があります。 コンポーネントがマウントされる前に、コンストラクターでこれを行うのは完全に理にかなっていますよね？

間違い！

状態を更新するサブスクリプションやその他の副作用などについては、ロジックをcomponentDidMount()に配置する必要があります。これは、コンポーネントがマウントされた直後に起動し、状態を更新しても問題は発生しません。その中。

コンストラクターも必要ですか？

コンストラクターは非常に便利ですが、多すぎる場合もあります。 コンポーネントの状態を維持することを計画しておらず、イベントハンドラーをバインドしていない場合は、コンストラクターを定義する必要はまったくありません。

実際、状態ハンドラーやイベントハンドラーが必要ない場合は、おそらくクラスベースのコンポーネントはまったく必要ありません。 余分な入力を少し節約して、機能コンポーネントを使用するだけです。