Quelle est la différence entre “super()” et “super(accessoires)” à Réagir lors de l'utilisation de es6 classes?
Quand est-il important de passer props
à super()
, et pourquoi?
class MyComponent extends React.Component {
constructor(props) {
super(); //or super(props) ?
}
}
Une bonne explication peut également être trouvé à l'adresse réagi de façon excessive.io/pourquoi-ne-nous-écrire-super-accessoires
OriginalL'auteur Misha Moroshko | 2015-06-01
Vous devez vous connecter pour publier un commentaire.
Il n'y a qu'une seule raison, quand on a besoin de passer
props
àsuper()
:Quand vous voulez accéder à
this.props
dans le constructeur.En passant:
Pas de passage:
Remarque que passer ou ne pas passer
props
àsuper
a aucun effet sur les utilisations ultérieures dethis.props
à l'extérieurconstructor
. C'estrender
,shouldComponentUpdate
, ou des gestionnaires d'événements toujours ont accès.C'est explicitement dit dans une Sophie Alpert est réponse à une question similaire.
La documentation—De l'état et du Cycle de vie, l'Ajout d'État à une Classe, point 2—recommande:
Cependant, aucune raison n'est fourni. Nous pouvons spéculer que c'est soit à cause de sous-classement ou de compatibilité future.
(Merci @MattBrowne pour le lien)
this.props
estundefined
moins passé àsuper()
. De toute façon, il n'affecte pas plus tard de rendu ou de la disponibilité dethis.props
dans lerender()
fonction.non, en réalité reste de la classe ne dépend pas de cette construction, c'est le point. Composant reçoit des accessoires par un autre moyen que par paramètre du constructeur. Et puisque vous passez initiale accessoires pour
super
, vous avez une référence dans le constructeur.Selon la Réagir la documentation, vous devez toujours passer
props
àsuper()
: facebook.github.io/réagir/docs/.... Je ne suis pas sûr pourquoi, puisque, comme vous le soulignezthis.props
est accessible à d'autres méthodes de toute façon...peut-être ils sont à recommander pour de futures compatibilité en cas de futures versions de Réagir voulez peut-être faire quelque chose avecprops
dans le constructeur?Peut-être que je suis juste d'ouvrir une boîte de pandore ici, mais pourquoi jamais pass
props
àsuper
lorsque, comme vous l'avez souligné, laprops
paramètre est disponible pour nous d'utiliser dans le constructeur, etthis.props
fonctionne partout ailleurs? Est-il un avantage à tous à l'aide dethis.props
plus justeprops
? Est-ce une mauvaise pratique de se déstructurent hors deprops
dans le constructeur? Je pense que je suis toujours à la peine de voir un cas au moment où vous aurez jamais besoin de passerprops
àsuper
, mais je suis prêt à parier que c'est juste mon ignorance, ha.Si vous utilisez
super(props)
, vous pouvez appeler les méthodes qui utilisentthis.props
à partir de constructeur, commethis.doStuffUsingThisDotProps()
, sans avoir à passer sur les accessoires paramètre de ces méthodes/fonctions. Je viens d'écrire un constructeur de faire ce qui apparemment m'obligerait à utilisersuper(props)
tout d'abord, d'après les réponses à cette question.OriginalL'auteur Robin Pokorny
Dans cet exemple, vous étendez le
React.Component
classe, et par la ES2015 spec, un enfant du constructeur de la classe ne peut pas faire usage dethis
jusqu'àsuper()
a été appelé; aussi, ES2015 les constructeurs de classe ont pour appelersuper()
si ils sont des sous-classes.Par contraste:
Plus de détails, comme par cet excellent débordement de pile répondre
Vous pouvez voir des exemples de composants créés par l'extension de la
React.Component
classe qui n'appellent passuper()
mais vous remarquerez que ces n'avez pas unconstructor
, donc pourquoi il n'est pas nécessaire.Un point de confusion que j'ai vu de certains développeurs à qui j'ai parlé, c'est que les composants qui n'ont pas de
constructor
et, par conséquent, ne pas appelersuper()
n'importe où, n'ont encorethis.props
disponibles dans larender()
méthode. Rappelez-vous que cette règle et ce besoin de créer unthis
de liaison pour laconstructor
s'applique uniquement à laconstructor
.super()
etsuper(props)
).OriginalL'auteur Dave
Lorsque vous passez
props
àsuper
, les accessoires sont attribuées auxthis
. Jetez un oeil à le scénario suivant:Comment jamais quand vous n' :
OriginalL'auteur Nahush Farkande
Comme par le code source
vous devez passer
props
chaque fois que vous avez les accessoires et vous ne les mettez pas dansthis.props
manuellement.super(props)
et l'autre n'a pas. Mais leurs consommateurs à la fois ensemble d'accessoires. Quelle est la différence?Est-ce à dire que
this.props = props
etsuper(props)
sont la même chose?Ce n'est pas vrai. ReactElement en fait, jeux de
this.props
de l ‘ "extérieur" –indépendamment de ce qui se fait dans le constructeur.OriginalL'auteur zerkms
super()
est utilisée pour appeler le constructeur parent.super(props)
passeraitprops
pour le constructeur parent.À partir de votre exemple,
super(props)
pourrait appeler laReact.Component
constructeur de passage dansprops
comme argument.Plus d'informations sur
super
:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
OriginalL'auteur kspence
Dan Abramov a écrit un article sur ce sujet:
https://overreacted.io/why-do-we-write-super-props/
Et l'essentiel, c'est qu'il est utile d'avoir l'habitude de passant pour éviter ce scénario, honnêtement, je ne vois pas qu'il est peu probable de se produire:
OriginalL'auteur Alfonso Pérez
Lors de la mise en œuvre de la
constructor()
fonction à l'intérieur d'une Réagir composant,super()
est une exigence. Gardez à l'esprit que votreMyComponent
composant est l'extension ou la fonctionnalité d'emprunt de laReact.Component
de la classe de base.De cette classe de base a un
constructor()
fonction de sa propre qui a un peu de code à l'intérieur, à l'installation de Réagir composant pour nous.Lorsque nous définissons une
constructor()
fonction à l'intérieur de notreMyComponent
classe, nous sommes essentiellement, de la substitution ou de remplacement de laconstructor()
fonction qui est à l'intérieur de laReact.Component
classe, mais nous avons encore besoin de s'assurer que l'ensemble de l'installation de code à l'intérieur de cetteconstructor()
fonction est appelée.Afin de s'assurer que le
React.Component
’sconstructor()
fonction est appelée, nous appelonssuper(props)
.super(props)
est une référence pour les parentsconstructor()
fonction, c'est tout ce qu'il est.Nous devons ajouter
super(props)
à chaque fois de nous définir uneconstructor()
fonction à l'intérieur d'une classe de composant.Si nous n'avons pas, nous allons voir un message d'erreur indiquant que nous devons appeler
super(props)
.La raison de toute la définition de ce
constructor()
d'une fonction consiste à initialiser notre état de l'objet.Afin d'initialiser notre état de l'objet, sous la super appel que je vais écrire:
Nous avons donc défini notre
constructor()
méthode, initialisé notre objet de l'état par la création d'un objet JavaScript, attribution d'une propriété ou d'une paire clé/valeur, l'affectation du résultat de l'this.state
. Maintenant, bien sûr, c'est juste un exemple ici, donc je n'ai pas vraiment affecté une paire clé/valeur à l'état d'objet, c'est juste un objet vide.OriginalL'auteur Daniel
Ici est le violon que j'ai fait: https://jsfiddle.net/beshanoe/zpxbLw4j/1/. Il montre que les accessoires sont confiées non pas dans le constructeur par défaut. Ce que je comprends, ils sont affectés dans la méthode
React.createElement
. Doncsuper(props)
doit être appelée uniquement lorsque le constructeur de la superclasse manuellement assingsprops
àthis.props
. Si vous venez de prolonger laReact.Component
appelsuper(props)
ne fait rien avec les accessoires. Il sera peut-être modifié dans les prochaines versions de Réagir.OriginalL'auteur beshanoe
Ici, nous n'obtiendrez pas ce dans le constructeur de sorte qu'il sera de retour indéfini, mais nous serons en mesure de récupérer ce à l'extérieur de la fonction constructeur de la
Si nous sommes à l'aide de super(), alors on peut récupérer la variable "ce" à l'intérieur du constructeur ainsi
Ainsi, lorsque nous sommes à l'aide de super(); nous serons en mesure de récupérer cette mais cette.les accessoires ne sera pas défini dans le constructeur. Mais autre que constructeur, cette.les accessoires ne seront pas de retour indéfini.
Si nous utilisons super(accessoires), alors nous pouvons utiliser cette.les accessoires de la valeur à l'intérieur du constructeur ainsi
Sophie Alpert Réponse
OriginalL'auteur VIKAS KOHLI
Pour réagir version 16.6.3, nous utilisons super(accessoires) d'initialiser l'état de l'élément nom : ce.accessoires de jeu.nom
OriginalL'auteur shubham kapoor