javascript - props - ¿Qué hace llamar a super() en un constructor React?

props child react native

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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!