Quelle est la différence entre «super ()» et «super (props)» dans React lors de l’utilisation de classes es6?

Quand est-il important de passer des props à super() , et pourquoi?

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

    Il y a une seule raison pour laquelle il faut passer des props à super() :

    Lorsque vous souhaitez accéder à this.props dans le constructeur.

    Qui passe:

     class MyComponent extends React.Component { constructor(props) { super(props) console.log(this.props) // -> { icon: 'home', … } } } 

    Ne passe pas:

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

    Notez que le fait de transmettre ou non des props à super n’a aucun effet sur les utilisations ultérieures de this.props dehors du constructor . Cela est render , shouldComponentUpdate ou les gestionnaires d’événements y ont toujours access.

    Ceci est explicitement dit dans une réponse de Sophie Alpert à une question similaire.


    La documentation – État et cycle de vie, Ajout d’un état local à une classe, point 2 – recommande:

    Les composants de classe doivent toujours appeler le constructeur de base avec des props .

    Cependant, aucune raison n’est fournie. Nous pouvons spéculer que c’est à cause du sous-classement ou de la compatibilité future.

    (Merci @MattBrowne pour le lien)

    Dans cet exemple, vous étendez la classe React.Component et, selon la spécification ES2015, un constructeur de classe enfant ne peut pas l’utiliser jusqu’à this que super() ait été appelé; les constructeurs de classes ES2015 doivent également appeler super() s’il s’agit de sous-classes.

     class MyComponent extends React.Component { constructor() { console.log(this); // Reference Error } render() { return 
    Hello {this.props.name}
    ; } }

    Par contre:

     class MyComponent extends React.Component { constructor() { super(); console.log(this); // this logged to console } render() { return 
    Hello {this.props.name}
    ; } }

    Plus de détails selon cette excellente réponse de débordement de stack

    Vous pouvez voir des exemples de composants créés en étendant la classe React.Component qui n’appelle pas super() mais vous remarquerez qu’ils n’ont pas de constructor , par conséquent, ce n’est pas nécessaire.

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

    Un sharepoint confusion que j’ai vu chez certains développeurs à qui j’ai parlé est que les composants qui n’ont pas de constructor et n’appellent donc pas super() nulle part, ont toujours this.props disponible dans la méthode render() . N’oubliez pas que cette règle et ce besoin de créer this liaison pour le constructor ne s’appliquent qu’au constructor .

    Lorsque vous passez des props à super , les accessoires sont affectés à this . Jetez un coup d’œil au scénario suivant:

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

    Comme jamais quand tu fais:

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

    Selon le code source

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

    vous devez passer des props chaque fois que vous avez des accessoires et vous ne les mettez pas dans this.props manuellement.

    super() est utilisé pour appeler le constructeur parent.

    super(props) transmettrait les props au constructeur parent.

    De votre exemple, super(props) appellerait le constructeur React.Component en argument.

    Plus d’informations sur super : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

    Voici le violon que j’ai fait: https://jsfiddle.net/beshanoe/zpxbLw4j/1/ . Il montre que les accessoires ne sont pas affectés par défaut au constructeur. Si je comprends bien, ils sont associés à la méthode React.createElement . Par conséquent, super(props) ne devrait être appelé que lorsque le constructeur de la superclasse assigne manuellement des props à this.props . Si vous ne faites que prolonger l’appel de React.Component super(props) ne fera rien avec les accessoires. Peut-être que cela sera changé dans les prochaines versions de React.