React Constructor y palabra clave Super

Constructor: Constructor es un método que se utiliza para crear e inicializar un objeto creado con una clase y este debe ser único dentro de una clase en particular.

Super: Super es una palabra clave que se utiliza para llamar al método y los datos de la clase principal. Se utiliza para el modelo de herencia de clase.

Ahora analicemos por qué se usan constructor y super en ReactJS y cuál es su importancia.

Constructor:

• En ReactJS, el constructor se usa para componentes de clase, no para el componente funcional.
• Se utiliza para inicializar objetos, es decir, Estado en ReactJS.
• Se utiliza para enlazar métodos en ReactJS.
• Se usa para leer o acceder a la propiedad de un padre desde el componente de un hijo en ReactJS.
• No hay necesidad de clase hasta que las variables de estado se inicialicen en función de los accesorios.
• Constructor es fundamental siempre que la necesidad de acceder o generar estado local.
• El constructor se utiliza para vincular los controladores de eventos que se producen en los componentes.

Nota: Constructor se ejecuta antes que cualquier otra cosa en el código basado en clases en react.js para el ciclo de vida del componente.

El código del constructor se ejecuta una vez, y solo una vez, durante todo el ciclo de vida de este componente en react

Súper:

• En ReactJS super llame a otros métodos constructores que se instancian.
• En ReactJS, se usa para acceder a las propiedades y métodos principales de los componentes secundarios.
• Se usa en un método anulado en react.js
• Super reside siempre dentro del constructor.
• Super es esencial siempre que el constructor esté allí en ReactJS.
• Es importante llamar a super antes de que el objeto se inicialice, es decir, antes de usar this.state en el constructor si no está allí, entonces el código genera un error.

Entendamos con la ayuda de ejemplos. 

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:

 

Ejemplo: este archivo se ejecutará en la estructura del proyecto del nombre de archivo App.js. El ejemplo describe cómo constructor es una llamada de método e instancia el objeto y el super es útil para esto.

import logo from './logo.svg';
import './App.css';
import { Component } from 'react'
class App extends Component {
    constructor() {
        super();
        this.state = {
            name: { 
                firstname: "organisation", 
                lastname: "Article" },
            company: "ztm"
        };
    }
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" 
                        alt="logo" />
                    <p>
                        Hello {this.state.name.firstname} 
                        {this.state.name.lastname},
                        I work at {this.state.company}
                    </p>
                    <button onClick={() => {
                        this.setState(() => {
                            return {
                                name: { 
                                    firstname: 'Gfg', 
                                    lastname: 'React Article' 
                                }
                            }
                        }, () => {
                            console.log(this.state);
                        });
                        //
                    }}>change name</button>
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </a>
                </header>
            </div>
        );
    }
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npx start

Producción: