Was ist der Unterschied zwischen "super ()" und "super (Requisiten)" in React, wenn es6-Klassen verwendet werden?

Wann ist es wichtig , passieren propszu super(), und warum?

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

Es gibt nur einen Grund , wenn man passieren muss , propsum super():

Wenn Sie this.propsim Konstruktor zugreifen möchten .

Vorbeigehen:

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

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

Nicht vorbei:

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', … }
    }
}

Beachten Sie, dass vorbei oder nicht vorbei propsan superhat keinen Einfluss auf die spätere Verwendungen von this.propsaußen constructor. Das heißt render, shouldComponentUpdateoder Ereignishandler haben immer Zugriff darauf.

Dies wird ausdrücklich in einer Antwort von Sophie Alpert auf eine ähnliche Frage gesagt .

In der Dokumentation - Status und Lebenszyklus, Hinzufügen eines lokalen Status zu einer Klasse, Punkt 2 - wird empfohlen:

Klassenkomponenten sollten immer den Basiskonstruktor mit aufrufen props.

Es wird jedoch kein Grund angegeben. Wir können spekulieren, dass dies entweder auf Unterklassen oder auf zukünftige Kompatibilität zurückzuführen ist.

(Danke @MattBrowne für den Link)

In diesem Beispiel erweitern Sie die React.ComponentKlasse, und gemäß der ES2015-Spezifikation kann ein untergeordneter Klassenkonstruktor erst dann verwendet werden, thiswenn super()er aufgerufen wurde. Außerdem müssen ES2015-Klassenkonstruktoren aufrufen, super()wenn sie Unterklassen sind.

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

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

Im Gegensatz:

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

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

Weitere Details finden Sie in dieser hervorragenden Antwort zum Stapelüberlauf

Möglicherweise sehen Sie Beispiele für Komponenten, die durch Erweitern der React.ComponentKlasse erstellt wurden und nicht aufgerufen werden. super()Sie werden jedoch feststellen, dass diese keine haben constructor, weshalb dies nicht erforderlich ist.

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

Ein Punkt der Verwirrung, den ich von einigen Entwicklern gesehen habe, mit denen ich gesprochen habe, ist, dass die Komponenten, die keine haben constructorund daher super()nirgendwo aufrufen , immer noch this.propsin der render()Methode verfügbar sind . Denken Sie daran, dass diese Regel und die Notwendigkeit, eine thisBindung für die zu erstellen, constructornur für die gilt constructor.

Wenn Sie propsan übergeben super, werden die Requisiten zugewiesen this. Schauen Sie sich das folgende Szenario an:

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

Wie auch immer, wenn Sie:

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

Wie pro Quellcode

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

Sie müssen propsjedes Mal bestehen, wenn Sie Requisiten haben, und Sie setzen sie nicht this.propsmanuell ein.

Dan Abramov hat einen Artikel zu diesem Thema geschrieben:

Warum schreiben wir super (Requisiten)?

Und das Wesentliche dabei ist, dass es hilfreich ist, die Gewohnheit zu haben , es zu bestehen, um dieses Szenario zu vermeiden. Ehrlich gesagt sehe ich es nicht als unwahrscheinlich an:

// 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() wird verwendet, um den übergeordneten Konstruktor aufzurufen.

super(props)würde propsan den übergeordneten Konstruktor übergeben.

In Ihrem Beispiel super(props)würde der übergebende React.ComponentKonstruktor propsals Argument aufgerufen .

Weitere Informationen unter super: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

Bei der Implementierung der constructor()Funktion in einer React-Komponente super()ist dies erforderlich. Beachten Sie, dass Ihre MyComponentKomponente Funktionen aus der React.ComponentBasisklasse erweitert oder ausleiht .

Diese Basisklasse hat eine eigene constructor()Funktion, die Code enthält, um unsere React-Komponente für uns einzurichten.

Wenn wir eine constructor()Funktion innerhalb unserer MyComponentKlasse definieren , überschreiben oder ersetzen wir im Wesentlichen die constructor()Funktion innerhalb der React.ComponentKlasse, müssen jedoch sicherstellen, dass der gesamte Setup-Code innerhalb dieser constructor()Funktion weiterhin aufgerufen wird.

So , um sicherzustellen , dass die React.Components‘ constructor()Funktion aufgerufen wird, rufen wir super(props). super(props)ist ein Hinweis auf die Elternfunktion constructor(), das ist alles was es ist.

Wir müssen super(props)jedes Mal hinzufügen, wenn wir eine constructor()Funktion innerhalb einer klassenbasierten Komponente definieren.

Wenn wir dies nicht tun, wird ein Fehler angezeigt, der besagt, dass wir anrufen müssen super(props).

Der gesamte Grund für die Definition dieser constructor()Funktion besteht darin, unser Statusobjekt zu initialisieren.

Um unser Statusobjekt zu initialisieren, schreibe ich unter den Superaufruf:

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

      this.state = {};
   }

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

Also haben wir unsere constructor()Methode definiert, unser Statusobjekt initialisiert, indem wir ein JavaScript-Objekt erstellt, ihm eine Eigenschaft oder ein Schlüssel / Wert-Paar zugewiesen und das Ergebnis davon zugewiesen haben this.state. Dies ist hier natürlich nur ein Beispiel, daher habe ich dem Statusobjekt nicht wirklich ein Schlüssel / Wert-Paar zugewiesen, es ist nur ein leeres Objekt.

Hier ist die Geige, die ich gemacht habe: jsfiddle.net . Es zeigt, dass Requisiten standardmäßig nicht im Konstruktor zugewiesen sind. Soweit ich weiß, werden sie in der Methode bewertet React.createElement. Daher super(props)sollte nur dann , wenn die übergeordnete Klasse Konstruktor manuell assings aufgerufen werden propszu this.props. Wenn Sie nur den React.ComponentAnruf verlängern , super(props)wird nichts mit Requisiten tun. Vielleicht wird es in den nächsten Versionen von React geändert.

Hier erhalten wir dies nicht im Konstruktor, so dass es undefiniert zurückgibt, aber wir können dies außerhalb der Konstruktorfunktion abrufen

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

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

Wenn wir super () verwenden, können wir die Variable "this" auch im Konstruktor abrufen

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

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

Also, wenn wir super () verwenden; Wir werden dies abrufen können, aber this.props sind im Konstruktor undefiniert. Anders als der Konstruktor gibt this.props jedoch nicht undefiniert zurück.

Wenn wir super (Requisiten) verwenden, können wir diesen.props-Wert auch im Konstruktor verwenden

Sophie Alperts Antwort

Wenn Sie this.props im Konstruktor verwenden möchten, müssen Sie Requisiten an super übergeben. Andernfalls spielt es keine Rolle, da React unmittelbar nach dem Aufruf des Konstruktors .props von außen auf die Instanz setzt.

Für die Reaktionsversion 16.6.3 verwenden wir super (Requisiten) , um den Namen des Statuselements zu initialisieren : this.props.name

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