Wann ist es wichtig , passieren props
zu super()
, und warum?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
reactjs
ecmascript-6
Mischa Moroshko
quelle
quelle
Antworten:
Es gibt nur einen Grund , wenn man passieren muss ,
props
umsuper()
:Wenn Sie
this.props
im Konstruktor zugreifen möchten .Vorbeigehen:
Nicht vorbei:
Beachten Sie, dass vorbei oder nicht vorbei
props
ansuper
hat keinen Einfluss auf die spätere Verwendungen vonthis.props
außenconstructor
. Das heißtrender
,shouldComponentUpdate
oder 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:
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)
quelle
this.props
istundefined
es sei denn, an übergebensuper()
. In beiden Fällen hat dies keinen Einfluss auf das spätere Rendern oder die Verfügbarkeitthis.props
derrender()
Funktion.super
, haben Sie im Konstruktor einen Verweis darauf.props
ansuper()
folgende Adresse übergeben : facebook.github.io/react/docs/… . Ich bin mir nicht sicher, warum, da, wie Sie hervorheben,this.props
auf andere Weise auf beide Methoden zugegriffen werden kann. Vielleicht empfehlen sie dies aus Gründen der zukünftigen Kompatibilität, falls zukünftige Versionen von React möglicherweise etwasprops
im Konstruktor tun möchten .props
super
props
ich jemals darauf übergehen , wenn, wie Sie betont haben, der Parameter genau dort verfügbar ist, damit wir ihn im Konstruktor verwenden können , undthis.props
überall anders funktioniert? Gibt es überhaupt einen Vorteil, wenn manthis.props
mehr als nur verwendetprops
? Ist es eine schlechte Praxis,props
im Konstruktor abzubrechen? Ich glaube , ich bin immer noch nicht um einen Fall zu sehen , wenn Sie jemals passieren bräuchtenprops
zusuper
, aber ich bin bereit , es ist nur meine Unwissenheit zu wetten, ha.super(props)
, können Sie Methoden aufrufen, diethis.props
vom Konstruktor aus verwendet werdenthis.doStuffUsingThisDotProps()
, ohne den Parameter props an diese Methoden / Funktionen übergeben zu müssen. Ich habe gerade einen Konstruktor geschrieben, der dies tut, was anscheinend erfordern würde, dass ichsuper(props)
zuerst gemäß den Antworten auf diese Frage benutze .In diesem Beispiel erweitern Sie die
React.Component
Klasse, und gemäß der ES2015-Spezifikation kann ein untergeordneter Klassenkonstruktor erst dann verwendet werden,this
wennsuper()
er aufgerufen wurde. Außerdem müssen ES2015-Klassenkonstruktoren aufrufen,super()
wenn sie Unterklassen sind.Im Gegensatz:
Weitere Details finden Sie in dieser hervorragenden Antwort zum Stapelüberlauf
Möglicherweise sehen Sie Beispiele für Komponenten, die durch Erweitern der
React.Component
Klasse erstellt wurden und nicht aufgerufen werden.super()
Sie werden jedoch feststellen, dass diese keine habenconstructor
, weshalb dies nicht erforderlich ist.Ein Punkt der Verwirrung, den ich von einigen Entwicklern gesehen habe, mit denen ich gesprochen habe, ist, dass die Komponenten, die keine haben
constructor
und dahersuper()
nirgendwo aufrufen , immer nochthis.props
in derrender()
Methode verfügbar sind . Denken Sie daran, dass diese Regel und die Notwendigkeit, einethis
Bindung für die zu erstellen,constructor
nur für die giltconstructor
.quelle
super()
undsuper(props)
).Wenn Sie
props
an übergebensuper
, werden die Requisiten zugewiesenthis
. Schauen Sie sich das folgende Szenario an:Wie auch immer, wenn Sie:
quelle
Wie pro Quellcode
Sie müssen
props
jedes Mal bestehen, wenn Sie Requisiten haben, und Sie setzen sie nichtthis.props
manuell ein.quelle
super(props)
und den anderen nicht. Aber ihre Verbraucher setzen beide Requisiten. Was ist der Unterschied?this.props = props
undsuper(props)
ist dasselbe?this.props
von außen festgelegt - unabhängig davon, was im Konstruktor ausgeführt wird.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:
quelle
super()
wird verwendet, um den übergeordneten Konstruktor aufzurufen.super(props)
würdeprops
an den übergeordneten Konstruktor übergeben.In Ihrem Beispiel
super(props)
würde der übergebendeReact.Component
Konstruktorprops
als Argument aufgerufen .Weitere Informationen unter
super
: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/superquelle
Bei der Implementierung der
constructor()
Funktion in einer React-Komponentesuper()
ist dies erforderlich. Beachten Sie, dass IhreMyComponent
Komponente Funktionen aus derReact.Component
Basisklasse 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 unsererMyComponent
Klasse definieren , überschreiben oder ersetzen wir im Wesentlichen dieconstructor()
Funktion innerhalb derReact.Component
Klasse, müssen jedoch sicherstellen, dass der gesamte Setup-Code innerhalb dieserconstructor()
Funktion weiterhin aufgerufen wird.So , um sicherzustellen , dass die
React.Component
s‘constructor()
Funktion aufgerufen wird, rufen wirsuper(props)
.super(props)
ist ein Hinweis auf die Elternfunktionconstructor()
, das ist alles was es ist.Wir müssen
super(props)
jedes Mal hinzufügen, wenn wir eineconstructor()
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:
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 habenthis.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.quelle
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
. Dahersuper(props)
sollte nur dann , wenn die übergeordnete Klasse Konstruktor manuell assings aufgerufen werdenprops
zuthis.props
. Wenn Sie nur denReact.Component
Anruf verlängern ,super(props)
wird nichts mit Requisiten tun. Vielleicht wird es in den nächsten Versionen von React geändert.quelle
Hier erhalten wir dies nicht im Konstruktor, so dass es undefiniert zurückgibt, aber wir können dies außerhalb der Konstruktorfunktion abrufen
Wenn wir super () verwenden, können wir die Variable "this" auch im Konstruktor abrufen
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
quelle
Für die Reaktionsversion 16.6.3 verwenden wir super (Requisiten) , um den Namen des Statuselements zu initialisieren : this.props.name
quelle