Reactでstateを定義する際にconstructor(引数){ super(引数); }を記述する理由

なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ - Qiita

 

プロゲートのReactのスライドでも、youtubeにReactの解説をあげられている人も

state定義時に

 

constructor(props) {

  super(props);

}

 

のように書いたとき、「これは定型文みたいなもんだからとりあえず覚えといて」みたいなことを言われたのですが、これって何やっとんねんっていうのが気になってしまったので調べてアウトプットしてみやす!!

 

前提として

JavaScriptではsuperは親クラスのコンストラクタを参照する。

・下の例では、親クラスはReact.Componentクラス

JavaScriptでは、コンストラクターで親のコンストラクターを呼ぶまでは、「this」は使わせてくれない

gyazo.com

 

JavaScriptがthisを使用する前に親のコンストラクターの実行を強制させるのには、理由がある。

 

super(props)以前にthisの使用が許可されていた場合のことを考えると、以下のような表現が可能になる。

 

gyazo.com

コンストラクタで、同一クラスにあるgreetColleaguesメソッドを呼び出している。

 

しかし数ヶ月経ったとき、以下のような処理をメソッド内に書き足すかもしれない。

gyazo.com

 

しかしこれでは、this.greetColleagues() はsuper(props)以前に定義されている為、this.nameは定義されていないとエラーが出てしまう。

 

なのでこのようなミスを事前に防ぐために、javascriptではthisを使用したい場合に、superの呼び出しを強制している。

 

この制限はクラス定義されたReactのコンポーネントにも適用される。