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

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

電話  super(props) 使用する前に this.props

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

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

代わりに、 props からの値 constructor() そしてそれを super() 方法：

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

あなたが電話するとき super() メソッドでは、親クラスのコンストラクターを呼び出します。これは、Reactコンポーネントの場合は次のとおりです。 React.Component.

電話しないでください  setState() 中身 constructor()

コンポーネントのコンストラクターは、コンポーネントの初期状態を設定するのに最適な場所です。 使用する代わりに 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() これは、コンポーネントがマウントされた直後に起動し、コンポーネント内の状態を更新しても問題はありません。

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

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

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