Reactでstateを定義する際にconstructor(引数){ super(引数); }を記述する理由
なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ - Qiita
プロゲートのReactのスライドでも、youtubeにReactの解説をあげられている人も
state定義時に
constructor(props) {
super(props);
}
のように書いたとき、「これは定型文みたいなもんだからとりあえず覚えといて」みたいなことを言われたのですが、これって何やっとんねんっていうのが気になってしまったので調べてアウトプットしてみやす!!
前提として
・JavaScriptではsuperは親クラスのコンストラクタを参照する。
・下の例では、親クラスはReact.Componentクラス
・JavaScriptでは、コンストラクターで親のコンストラクターを呼ぶまでは、「this」は使わせてくれない
JavaScriptがthisを使用する前に親のコンストラクターの実行を強制させるのには、理由がある。
super(props)以前にthisの使用が許可されていた場合のことを考えると、以下のような表現が可能になる。
コンストラクタで、同一クラスにあるgreetColleaguesメソッドを呼び出している。
しかし数ヶ月経ったとき、以下のような処理をメソッド内に書き足すかもしれない。
しかしこれでは、this.greetColleagues() はsuper(props)以前に定義されている為、this.nameは定義されていないとエラーが出てしまう。
なのでこのようなミスを事前に防ぐために、javascriptではthisを使用したい場合に、superの呼び出しを強制している。
この制限はクラス定義されたReactのコンポーネントにも適用される。