Was ist der Unterschied zwischen "super()" und "super" (Requisiten)" Reagieren, wenn mit es6-Klassen?

In diesem Beispiel erweitern Sie die React.Component Klasse, und pro die ES2015 spec, eine Kind-Klasse-Konstruktor nicht nutzen kann this bis super() genannt worden ist; auch, ES2015 Klasse Konstruktoren aufrufen super() wenn Sie Unterklassen.

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

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

Dagegen:

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

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

Mehr detail als pro diese ausgezeichnete stack overflow-Antwort

Können Sie sehen Beispiele für Komponenten erstellt durch die Verlängerung der React.Component Klasse, nicht nennen super() aber Sie werden feststellen, diese nicht über eine constructor, also warum es nicht notwendig ist.

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

Einem Punkt der Verwirrung, die ich gesehen habe von einigen Entwicklern, die ich gesprochen habe, ist, dass die Komponenten, die keine constructor und daher nicht super() überall, noch this.props erhältlich in den render() Methode. Denken Sie daran, dass diese Regel und diese müssen zum erstellen einer this verbindlich für die constructor gilt nur für die constructor.

InformationsquelleAutor Dave

Als pro source code

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

müssen Sie passieren props jedes mal, wenn Sie die Requisiten und die Sie nicht setzen Sie Sie in this.props manuell.

InformationsquelleAutor zerkms

Bei der Umsetzung der constructor() Funktion innerhalb einer Reagieren Komponente super() ist eine Voraussetzung. Beachten Sie, dass Ihre MyComponent Komponente ist die Verlängerung oder übernahme von Funktionen der React.Component Basisklasse.

Diese Basisklasse hat eine constructor() eigene Funktion, code, in der es, um das setup unserer Reagieren Komponente für uns.

Wenn wir definieren eine constructor() Funktion innerhalb unserer MyComponent Klasse, wir sind im wesentlichen, überschreiben oder ersetzen der constructor() Funktion, die innerhalb der React.Component Klasse, aber wir müssen noch um sicherzustellen, dass alle setup-code, der in dieser constructor() Funktion noch aufgerufen wird.

So, um sicherzustellen, dass die React.Component's constructor() Funktion aufgerufen wird, nennen wir super(props). super(props) ist ein Verweis auf die Eltern constructor() Funktion, das ist alles.

Fügen wir super(props) jedes einzelne mal, wenn wir definieren eine constructor() - Funktion innerhalb einer Klasse-basierte Komponente.

Wenn wir nicht wir werden sehen, eine Fehlermeldung besagt, dass wir haben, zu nennen super(props).

Der ganze Grund für die Definition dieser constructor() funciton ist die Initialisierung unseres Staates-Objekt.

So, in Reihenfolge zu initialisieren, unsere state-Objekt, unter dem super-Aufruf werde ich schreiben:

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

      this.state = {};
   }

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

So haben wir bestimmt unsere constructor() Methode, initialisiert unserer state-Objekt durch das erstellen eines JavaScript-Objekts, das zuordnen einer Eigenschaft oder eines Schlüssel/Wert-paar, weisen das Ergebnis, dass this.state. Nun dies ist natürlich nur ein Beispiel, damit ich hier wirklich nicht zugewiesenen Schlüssel/Wert-paar an den Staat Objekt, es ist nur ein leeres Objekt.

InformationsquelleAutor Daniel

Hier ist die Geige, die ich gemacht habe: https://jsfiddle.net/beshanoe/zpxbLw4j/1/. Es zeigt, dass die Requisiten zugeordnet sind, nicht im Konstruktor standardmäßig. Wie ich verstehe, Sie entsprechen in der Methode React.createElement. Daher super(props) sollte nur aufgerufen werden, wenn der superclass-Konstruktor manuell assings props zu this.props. Wenn Sie nur die Erweiterung der React.Component aufrufen super(props) wird nichts tun, mit Requisiten. Vielleicht wird Es geändert werden in den nächsten Versionen zu Reagieren.

InformationsquelleAutor beshanoe

Für reagieren version 16.6.3, verwenden wir super(Requisiten) zu initialisieren element state name : das.Requisiten.name

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

InformationsquelleAutor shubham kapoor