Zusammenfassung der Konstruktor- und Superwissenspunkte in React-Komponenten

1. Einige Tipps zu mit class in react deklarierten Klassen

Wie oben gezeigt: Die Child-Klasse wird mit dem Schlüsselwort class deklariert und erbt von der React-Klasse.

A. Um welche Art von Kind handelt es sich? typeofChild === 'function', was eigentlich dem von ES5 deklarierten Konstruktor entspricht function Child() { //declare the constructor}

B. Wenn die Child-Klasse aufgerufen wird (new Child()), wird sie zuerst ausgeführt und die Konstruktorfunktion des Childs wird automatisch ausgeführt.

Konstruktor() {
   console.log('Konstruktor ausgeführt')
       gib 'hah' zurück
   }

   getName() {
       console.log('Methode ausgeführt')
   }
}
var dd = neue Person();
konsole.log(dd)

Druckt wie folgt:

3. dies in der Child-Klasse? this verweist auf die Instanz von Child, was äquivalent zu new Child() ist. Sind sie also völlig gleich? Nein, dies wird in React basierend auf new Child() umschlossen (siehe Abbildung unten).

Das obige Bild zeigt new Child() Das folgende Bild zeigt dies in Child

Fazit: Dies wird auf der Grundlage von new Child() gekapselt, einschließlich einiger interner Methoden von React.

Gleichzeitig wird in der Komponente die Child-Klasse ( <div> <Child /> </div> ) verwendet, die als new Child() + React-Paket angesehen werden kann. (Einzelheiten müssen noch untersucht werden...)

2. Ist der Konstruktor in der Komponente notwendig? Was ist, wenn nicht? ? Was bewirkt es? ? ?

Ergänzendes Wissen zu ES6: http://es6.ruanyifeng.com/ lautet wie folgt:

Klasse ColorPoint erweitert Point {
}

// Äquivalent zur Klasse ColorPoint extends Point {
  Konstruktor(...args) {
    super(...args);
  }
}
// Wie Sie sehen, ist der Konstruktor nicht geschrieben, er wird während der Ausführung automatisch ausgefüllt

Gemäß den Vererbungsregeln von ES6 wird der Konstruktor beim Erstellen einer neuen Instanz hinzugefügt, unabhängig davon, ob die Unterklasse einen Konstruktor schreibt oder nicht.

Daher: Die Konstruktor-Hook-Funktion ist nicht unverzichtbar und Unterkomponenten können in einigen Fällen weggelassen werden.

Sehen wir uns als Nächstes an, was der Unterschied mit oder ohne Konstruktor-Hook-Funktion ist:

A. Überprüfen Sie zunächst, ob eine Konstruktor-Hook-Funktion this.constructor vorhanden ist

this.constructor mit Konstruktor-Hook-Funktion

this.constructor ohne Konstruktor-Hook-Funktion

Wenn Sie sich die Details ansehen, werden Sie feststellen, dass die Child-Klasse über eine zusätzliche Konstruktormethode verfügt, wenn eine Konstruktor-Hook-Funktion vorhanden ist.

B. Überprüfen Sie zunächst, ob in der Hook-Funktion des Konstruktors, also der Komponenteninstanz, ein „this“ vorhanden ist.

Diese Instanz verfügt über die Konstruktor-Hook-Funktion.

Diese Instanz ohne Konstruktor-Hook-Funktion.

Sie werden feststellen, dass Sie den Status definieren können, wenn eine Konstruktor-Hook-Funktion vorhanden ist. Wenn der Benutzer den Status nicht definiert, macht es keinen Unterschied, ob eine Konstruktor-Hook-Funktion vorhanden ist oder nicht.

Fazit: Wenn eine Komponente ihren eigenen Anfangszustand definieren möchte, muss dieser in die Hook-Funktion des Konstruktors geschrieben werden.

Wenn der Benutzer keinen Status verwendet, werden die Eigenschaften zum Akzeptieren von Parametern verwendet, mit oder ohne Konstruktor-Hook-Funktion. Die Konstruktor-Hook-Funktion kann auch weggelassen werden.

Wenn Sie außerdem keinen Status verwenden, warum verwenden Sie dann keine zustandslosen Komponenten (empfohlen)? ? ?

3. Sind Requisiten im Super notwendig? Was ist die Funktion? ?

Manche Freunde sind es gewohnt, jedes Mal, wenn sie eine Komponente schreiben, Props in Konstruktor und Super zu schreiben. Ist das notwendig? ?

Wie in der Abbildung gezeigt:

Zunächst einmal ist es wichtig, Folgendes klarzustellen:

Sie müssen keinen Konstruktor schreiben. Sobald Sie einen Konstruktor geschrieben haben, müssen Sie in dieser Funktion super() schreiben.

An diesem Punkt verfügt die Komponente über ein eigenes „this“, und das Schlüsselwort „this“ kann global in der Komponente verwendet werden.

Andernfalls, wenn es sich nur um einen Konstruktor handelt und super() nicht ausgeführt wird, sind alle nachfolgenden „this“-Anweisungen falsch! ! !

Quelle ES6: http://es6.ruanyifeng.com/

Aber ist es notwendig, die Parameter-Props in Super zu schreiben? ? Die Antwort ist nicht unbedingt. Schauen wir uns zuerst den Code an:

Mit Requisiten:

Keine Requisiten:

Daraus lässt sich schließen, dass, wenn Sie this.props im Konstruktor verwenden möchten, super (props) hinzugefügt werden muss.

Derzeit können Sie „props“ oder „this.props“ verwenden. Das ist dasselbe. (Props können jedoch beliebige Parameter sein, this.props ist eine feste Schreibmethode).

Wie in der Abbildung gezeigt:

Wenn this.props oder props im Custructor-Lebenszyklus nicht verwendet werden, können props weggelassen werden.

Unten sehen Sie ein Szenario mit Props. Vergessen Sie dabei nicht den Lebenszyklus von componentWillReceiveProps.

Siehe einen anderen Artikel Was Sie über den Lebenszyklus von React wissen müssen

Fortsetzung: Wenn der Konstruktor keine Props durch Super erhält, in anderen Lebenszyklen,

Können this.props direkt in componentWillMount, componentDidMount und render verwendet werden? ?

Fazit: Ja, React hat this.props im Lebenszyklus mit Ausnahme des Konstruktors bestanden und wird von super(props) überhaupt nicht beeinflusst.

Daher kann die Frage, ob Props in Super empfangen werden, nur beeinflussen, ob this.props im Konstruktor-Lebenszyklus verwendet werden können. This.props existiert standardmäßig bereits in anderen Lebenszyklen.

Dies ist das Ende dieses Artikels über den Konstruktor und die Super-Wissenspunkte in Reaktionskomponenten. Weitere relevante Inhalte zum Konstruktor und Super von Reaktionskomponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!