es6クラスを使用する場合のReactの「super（）」と「super（props）」の違いは何ですか？

とき、それは合格することが重要であるpropsにsuper()、なぜ？

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

1を渡す必要がある唯一の理由があるpropsにはsuper()：

this.propsコンストラクタでアクセスしたい場合。

通過：

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

不合格：

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

渡すか渡さないことに注意propsするにはsuper持っていない何の効果の後の用途にthis.props外をconstructor。つまりrender、shouldComponentUpdateまたはイベントハンドラ常にそれへのアクセス権を持っています。

これは、同様の質問に対する 1つのソフィーアルパートの回答で明示的に述べられています。

ドキュメント— 状態とライフサイクル、クラスへのローカル状態の追加、ポイント2 —推奨：

クラスコンポーネントは、常にで基本コンストラクターを呼び出す必要がありますprops。

ただし、理由はありません。サブクラス化のためか、将来の互換性のためかと推測できます。

（リンクをありがとう@MattBrowne）

この例では、React.Componentクラスを拡張しており、ES2015仕様に従って、子クラスコンストラクターは呼び出されるthisまで使用できませんsuper()。また、ES2015クラスコンストラクターは、super()サブクラスの場合に呼び出す必要があります。

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

対照的に：

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

この優れたスタックオーバーフローの回答による詳細

React.Component呼び出さないクラスを拡張することによって作成されたコンポーネントの例が表示されるsuper()場合がありますが、これらにはがないconstructorため、なぜそれが必要ないのかがわかります。

class MyOtherComponent extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>;
  }
}

私が話をしたいくつかの開発者から私が見た混乱の1つの点は、何も持たずconstructor、したがってsuper()どこも呼び出さないコンポーネントがまだメソッドでthis.props利用できるというrender()ことです。このルールとこれthisはにconstructorのみ適用されるバインディングを作成する必要があることに注意してくださいconstructor。

に渡すpropsとsuper、小道具がに割り当てられthisます。次のシナリオを見てください。

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

あなたがするときはどのように：

constructor(props) {
    super(props);
    console.log(this.props) //props will get logged.
}

あたりとしてソースコード

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

あなたpropsは小道具を持っているたびに合格しなければならず、それらをthis.props手動で入れないでください。

Dan Abramovがこのトピックに関する記事を書きました。

なぜ私たちはスーパー（小道具）を書くのですか？

そして、その要点は、このシナリオを回避するために合格する癖があると役立つことです。正直に言うと、起こりそうにないと思います。

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined 
  }
  // ...
}

super() 親コンストラクターを呼び出すために使用されます。

super(props)props親コンストラクタに渡されます。

あなたの例から、引数として渡されるコンストラクタをsuper(props)呼び出します。React.Componentprops

詳細super：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

constructor()Reactコンポーネント内に関数を実装する場合、これsuper()は必須です。MyComponentコンポーネントがReact.Component基本クラスから機能を拡張または借用していることに注意してください。

この基本クラスには、constructor()Reactコンポーネントをセットアップするためのコードが組み込まれた独自の関数があります。

クラスconstructor()内で関数を定義する場合MyComponent、基本的にconstructor()は、React.Componentクラス内の関数をオーバーライドまたは置換しますが、この内部のすべてのセットアップコードを確認する必要があります。constructor()関数引き続き呼び出される。

したがって、React.Componentのconstructor()関数が確実に呼び出されるようにするために、を呼び出しますsuper(props)。super(props)parents constructor()関数への参照です。それだけです。

super(props)定義するたびに追加する必要がありますconstructor()クラスベースのコンポーネント内で関数ます。

そうしないと、呼び出しが必要であることを示すエラーが表示されます super(props)。

これを定義する全体の理由 constructor()関数は、状態オブジェクトを初期化することです。

状態オブジェクトを初期化するために、スーパーコールの下に次のように記述します。

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = {};
   }

  // React says we have to define render()
  render() {
    return <div>Hello world</div>;
  }
};

constructor()メソッドを定義し、JavaScriptオブジェクトを作成して状態オブジェクトを初期化し、それにプロパティまたはキーと値のペアを割り当て、その結果をに割り当てましたthis.state。もちろん、これはここでの例にすぎないので、キーと値のペアを状態オブジェクトに割り当てていません。空のオブジェクトです。

これが私が作ったフィドルです：jsfiddle.net。小道具はデフォルトではコンストラクターに割り当てられていないことを示しています。私が理解しているように、彼らは方法に取り憑かれていReact.createElementます。したがってsuper(props)、スーパークラスのコンストラクターが手動でにアクセスpropsする場合にのみ呼び出す必要がありますthis.props。あなたが単に延長した場合、React.Component呼び出しsuper(props)は小道具では何もしません。多分それはReactの次のバージョンで変更されるでしょう。

ここではコンストラクターでこれを取得しないため、未定義が返されますが、コンストラクター関数の外部でこれをフェッチできます

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error i.e return undefined
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

super（）を使用している場合は、コンストラクタ内の「this」変数もフェッチできます

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

したがって、super（）;を使用している場合は、これをフェッチすることはできますが、this.propsはコンストラクターで定義されません。しかし、コンストラクター以外では、this.propsは未定義を返しません。

super（props）を使用する場合は、コンストラクター内でもthis.props値を使用できます

ソフィーアルパートの回答

this.propsをコンストラクターで使用する場合は、スーパーに小道具を渡す必要があります。それ以外の場合、Reactはコンストラクターを呼び出した直後に外部から.propsをインスタンスに設定するため、問題になりません。

反応バージョン16.6.3では、super（props）を使用して状態要素名を初期化します：this.props.name

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};