Método React.js constructor()

Un constructor es un método que se llama automáticamente cuando creamos un objeto de esa clase. Puede administrar las tareas de inicialización inicial, como el valor predeterminado de ciertas propiedades del objeto o la prueba de cordura de los argumentos pasados. En pocas palabras, el constructor es un método que ayuda en la creación de objetos. 

El constructor no es diferente en React. Esto puede conectar controladores de eventos al componente y/o inicializar el estado local del componente. Antes de que se monte el componente, se dispara la función constructor() y, como la mayoría de las cosas en React, tiene algunas reglas que puede seguir al usarlas.

• Paso 1: llama a super(props) antes de usar this.props

  Debido a la naturaleza del constructor, no se puede acceder directamente al objeto this.props desde el principio, lo que puede generar errores. Este constructor arrojará un error:

  constructor() {
   console.log(this.props);
  }

  En su lugar, transferimos el valor de un accesorio a la función super() desde el constructor():

  constructor(props) {
   super(props);
   console.log(this.props);
  }

  Cuando llama a la función super(), se llama al constructor de la clase principal, que en el caso de React es React.Component. 

• Paso 2: Nunca llames a setState() dentro del constructor()

  El constructor de su componente es el lugar ideal para establecer el estado inicial del componente. Debe establecer el estado inicial directamente, en lugar de usar setState() como puede hacerlo en otros métodos de su clase:

  constructor(props) {
   super(props);
  
   this.state = {
     name 'kapil',
     age: 22,
   };
  }

  El único lugar donde puede asignar el estado local directamente de esa manera es el constructor. Debería depender de setState() en otro lugar dentro de nuestro componente.

• Paso 3: Evite asignar valores de this.props a this.state

  Debe intentar evitar establecer valores de las propiedades al establecer el estado inicial del componente en el constructor. Podemos hacer lo siguiente:

  constructor(props) {
   super(props);
  
   this.state = {
     name: props.name,
   };
  }

  No se le permitiría usar setState() para cambiar la propiedad más adelante. Puede hacer referencia fácilmente a la propiedad directamente en su código nombrando this.props.name, en lugar de asignar la propiedad directamente al estado.

• Paso 4: Enlaza todos los eventos en un solo lugar

  Podemos vincular fácilmente sus controladores de eventos en el constructor:

  constructor(props) {
   super(props);
  
   this.state = {
     // Sets that initial state
   };
  
   // Our event handlers
   this.onClick = this.onClick.bind(this);
   this.onKeyUp = this.onKeyUp.bind(this);
   // Rest Code
  }

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, muévase a ella con el siguiente comando.

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. El siguiente ejemplo cubre la demostración del constructor.

import React, { Component } from 'react';
  
class App extends Component {
  
  constructor(props) {
  
    // Calling super class constructor
    super(props);
      
    // Creating state
    this.state = {
      data: 'My name is User'
    }
      
    // Binding event handler
    this.handleEvent = this.handleEvent.bind(this);
  }
  
  handleEvent() {
    console.log(this.props);
  }
  
  render() {
    return (
      <div >
        <input type="text" value={this.state.data} />
        <br></br> <br></br>
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}
  
export default App;

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

npm start

Producción: