javascript - props - ¿Qué hace llamar a super() en un constructor React?
props child react native (4)
Al implementar el constructor para una
React.Component subclass
, debe llamar a
super(props)
antes que cualquier otra instrucción.
De lo contrario,
this.props
no estará
undefined
en el constructor, lo que puede provocar errores.
Learning React de los docs y encontré este ejemplo:
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
...
}
Según
Mozilla
, super te permite usar
this
en el constructor.
¿Hay alguna otra razón para usar un
super
independiente (sé que
super
permite acceder a los métodos de la clase principal) pero con React hay algún otro caso de uso de solo llamar a
super()
por sí mismo?
Para usar
this
palabra clave debemos usar la palabra clave
super
antes.
¿Por qué?
super
se usa para llamar al
constructor
la clase padre.
Ahora, ¿por qué necesitamos llamar al
constructor
los padres?
La respuesta es inicializar los valores de propiedades a los que nos referimos a través de
this
palabra clave.
Se llama a
super()
dentro de un componente reactivo solo si tiene un constructor.
Por ejemplo, el siguiente código no requiere super:
class App extends React.component {
render(){
return <div>Hello { this.props.world }</div>;
}
}
Sin embargo, si tenemos un constructor, entonces
super()
es obligatorio:
class App extends React.component {
constructor(){
console.log(this) //Error: ''this'' is not allowed before super()
}
}
La razón por la que
this
no se puede permitir antes de
super()
es porque
this
no se inicializa si no se llama a
super()
.
Sin embargo, incluso si no estamos usando
this
, necesitamos un
super()
dentro de un constructor porque
ES6 class constructors MUST call super if they are subclasses
.
Por lo tanto, debe llamar a
super()
siempre que tenga un constructor.
(Pero una subclase no tiene que tener un constructor).
Llamamos
super(props)
dentro del constructor si tenemos que usar
this.props
, por ejemplo:
class App extends React.component{
constructor(props){
super(props);
console.log(this.props); // prints out whatever is inside props
}
}
Espero poder aclararlo.
super()
llamará al
constructor
de su clase
parent
.
Esto es necesario cuando necesita acceder a algunas variables desde la clase principal.
En React, cuando llamas
super
con accesorios.
React hará que los
props
estén disponibles en todo el componente a través de
this.props
.
Ver ejemplo 2 a continuación
sin
super()
class A {
constructor() {
this.a = ''hello''
}
}
class B extends A {
constructor(){
console.log(this.a) //throws an error
}
}
console.log(new B())
con
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''}))
¡Espero que esto ayude!