¿Cuál es la diferencia entre super() y super(props) en React?

Antes de profundizar en la diferencia principal, comprendamos qué es Super() y Props como se muestra a continuación:

• Super(): se utiliza para llamar al constructor de su clase padre. Esto es necesario cuando necesitamos acceder a algunas variables de su clase principal.
• Props: Es una palabra clave especial que se usa en los soportes de reacción para las propiedades. Se utiliza para pasar datos de un componente a otro. Los datos de accesorios son de solo lectura, lo que significa que los componentes secundarios no deben cambiar los datos que provienen del padre.

Palabra clave ‘esto’: la palabra clave JavaScript this se refiere al objeto al que pertenece.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo de Super(): componente simple que demuestra el uso de la función Super() .

Nombre de archivo-App.js:

import React from 'react'
  
class MyComponent extends React.Component {
  constructor(props) {
    super()
    console.log(this.props) // Undefined 
    console.log(props)     // Defined Props Will Be Logged 
  }
   
render() {
    return <div>Hello {this.props.message}</div>; // Defined
  }
}
  
export default MyComponent;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: aquí, cuando no estamos usando accesorios en super(), cuando hacemos c onsole.log(this.props) en la consola, obtendremos un mensaje indefinido porque estamos usando this.props dentro del constructor. Pero si solo consolamos. log (accesorios) , esto nos dará un mensaje adecuado en la consola en la página web.

Ejemplo de Super(props): componente simple que demuestra el uso de la función Super(props) .

Nombre de archivo-App.js:

import React from 'react'
  
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(this.props) // {name:'Bob' , .....} Props Will Be Logged 
  }
  
  render() {
    return <div>Hello {this.props.message}</div>; // defined
  }
}
  
export default MyComponent;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: si queremos usar esto en el constructor, debemos pasarlo a super. Si queremos usar this.props dentro del constructor, debemos pasarlo con la función super(). De lo contrario, no queremos pasar accesorios a super() porque vemos esto. Los accesorios están disponibles dentro de la función de renderizado.

Note: Outside Constructor() Both will display same value for 'this.props'