La mayoría de los desarrolladores solo escriben super (accesorios) ya que no dañan el código, pero nadie está ansioso por saber la razón por la que funciona realmente y cómo es útil. Profundicemos más en los componentes de la clase y descubramos el uso de super(props) en el constructor.
Aquí surge una pregunta: ¿Por qué necesitamos super (accesorios)?
Entonces, la respuesta simple a esta pregunta es que básicamente permite acceder a this.props en una función Constructor. De hecho, lo que hace la función super() es llamar al constructor de la clase principal.
Sintaxis: No hay nada complejo en usar super(props), solo tenemos que llamar a super(props) en el método constructor de nuestro componente de clase hijo, así:
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}
Hablemos de ello con la ayuda de la implementación práctica.
-
Paso 1: Cree una aplicación React
npx create-react-app super_props
-
Paso 2: Después de terminar con la creación de la carpeta del proyecto (super_props), acceda a ella usando el siguiente comando.
cd super_props
Estructura del proyecto: una vez que abramos la carpeta de nuestro proyecto en cualquiera de los editores de código, como Visual Studio Code, la estructura de nuestro proyecto se verá así:
Ahora crearemos un componente Person.js separado en la carpeta src y será un componente basado en clase que heredará un componente de clase Person de su React.Component principal.
Nota: asegúrese de exportarlo e importarlo en el componente predeterminado App.js.
Ejemplo: Veamos ahora la implementación de super(props), pero en este ejemplo no usaremos super.
Person.js
import React from "react";
class Person extends React.Component {
constructor(props) {
console.log(this.props);
}
render() {
console.log(this.props);
return null;
}
}
export default Person;
Salida: cuando ejecutamos el código anterior, registrará un error en la consola:
Explicación: Esto se debe a que el constructor de la clase secundaria, es decir, la Clase de persona aquí, no reconocerá esta palabra clave hasta que se haya llamado a la función super(). Pero el código fuera del constructor no se verá afectado de ninguna manera. No afectará el renderizado o la disponibilidad de this.props en la función render().
Ejemplo 2: ahora veamos qué sucede cuando usamos super(props) dentro del método constructor, antes de usar esta palabra clave.
Person.js
import React from "react";
class Person extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
console.log(this.props);
return null;
}
}
export default Person;
Producción:
Explicación: ahora estamos obteniendo una salida (aquí los accesorios no tienen nada, por eso es un objeto vacío) que significa que los accesorios se están registrando en la consola. Cuando llamamos a este super(accesorios), básicamente estamos llamando al constructor de React.Component. Entonces podemos decir que super() es una referencia al constructor de la clase principal, es decir, React.Component en el ejemplo anterior, que también es la clase base para el componente Person. Entonces, cuando pasamos accesorios a super, los accesorios también se asignan a esto .
Entonces, para concluir, si queremos usar this.props o simplemente esta palabra clave dentro del constructor, debemos pasar los accesorios que provienen de la clase principal (React.Component en este caso) en super.