Que fait calling super () dans un constructeur React?
apprendre réagissez de la docs et suis tombé sur cet exemple :
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
...
}
Selon Mozilla, super vous permet d'utiliser this dans le constructeur. Y a-t-il une autre raison d'utiliser un stand alone!--2--> (je sais super vous permet d'accéder parent de la classe de méthodes, aussi), mais à Réagir est-il un autre cas d'usage de l'appeler juste super() par lui-même?
3 réponses
super() est appelé à l'intérieur d'un composant react seulement s'il a un constructeur. Par exemple, le code ci-dessous ne nécessite pas super:
class App extends React.component {
render(){
return <div>Hello { this.props.world }</div>;
}
}
Cependant, si on a un constructeur puis super() est obligatoire:
class App extends React.component {
constructor(){
console.log(this) //Error: 'this' is not allowed before super()
}
}
pourquoi this ne peut pas être autorisé avant super() est parce que this n'est pas initialisé si super() n'est pas appelé. Cependant, même si nous ne sommes pas à l'aide de this nous avons besoin d'un super() à l'intérieur d'un constructeur car ES6 class constructors MUST call super if they are subclasses. Ainsi, vous devez vous appeler super() tant que vous avez un constructeur. (Mais il n'est pas nécessaire qu'une sous-classe ait un constructeur).
Nous appelons super(props) dans le constructeur si nous devons utiliser this.props par exemple:
class App extends React.component{
constructor(props){
super(props);
console.log(this.props); // prints out whatever is inside props
}
}
j'espère que je pourrais le rendre clair.
super() appelle constructor ses parent classe. Ceci est nécessaire lorsque vous avez besoin d'accéder à certaines variables de la classe parent.
À Réagir, lorsque vous appelez super avec accessoires. Réagir fera props disponible dans l'ensemble de la composante par this.props. Voir l'exemple 2 ci-dessous
sans super()
class A {
constructor() {
this.a = 'hello'
}
}
class B extends A {
constructor(){
console.log(this.a) //throws an error
}
}
console.log(new B())super()
class A {
constructor(props) {
this.props = props
}
}
class B extends A {
constructor(props) {
super(props)
console.log(this.props)
}
}
console.log(new B({title: 'hello world'}))espérons ceci aide!
Permet de le rendre Clair. Pour utiliser ce mot-clé, nous devrions utiliser le mot-clé super avant. quoi?, Oui!, Super est utilisé pour appeler le constructeur de la classe mère. Maintenant vous avez la question ici Pourquoi devons-nous appeler le constructeur parent? La réponse est d'initialiser les valeurs de propriétés auxquelles nous nous référons par ce mot-clé.