Orden de métodos de ciclo de vida de ReactJS en montaje

Cada componente en React tiene que pasar por tres fases que son Montaje, Actualización y Desmontaje. Estos se denominan métodos de ciclo de vida en react.js. De los tres, el montaje es la primera fase del ciclo de vida.

Hay cuatro métodos que se incluyen en esta fase, esos métodos son:

• constructor()
• getDerivedStateFromProps()
• prestar()
• componenteHizoMontar()

De los cuatro, render() es un método obligatorio, mientras que los otros son opcionales.

requisitos previos:

• Conocimiento sobre react.js

Creando la aplicación React:

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

npx create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando:

cd project

Estructura del proyecto: Se verá así.

Nota: aprenda los cuatro métodos uno por uno cambiando el código en el archivo App.js.

1. Constructor(): El método constructor() se llama con los accesorios. Hereda las propiedades y el método del constructor padre.

En este archivo, estamos creando un constructor con props como argumentos, estamos heredando las propiedades usando super(props) . Estamos creando un nombre de estado con el valor ‘usuario’. Llamamos más al estado en nuestras etiquetas <h1>.

Ejemplo: Este es un ejemplo simple que ilustra el nombre del estado con el valor ‘usuario’:

import React, { Component } from "react";
 
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { name: 'user' };
    }
    render() {
        return (
            <div className="App">
                <h1>Welcome {this.state.name}</h1>
            </div>
        );
    }
}
 
export default App

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

2. getDerivedStateFromProps(): el método getDerivedStateFromProps() toma el estado como argumento y devuelve nulo u objeto con cambios en el estado.

Ejemplo: En este ejemplo, estamos creando un getDerivedStateFromProps() estático que cambia el nombre del estado de ‘usuario’ a ‘nuevoUsuario’.

import React, { Component } from "react";
 
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { name: 'user' };
    }
    static getDerivedStateFromProps(props) {
        return { name: 'newUser' };
    }
    render() {
 
 
        return (
            <div className="App">
                <h1>Welcome {this.state.name}</h1>
            </div>
        );
    }
}
 
export default App

Producción:

3. render(): El método render() envía el HTML al DOM.

Ejemplo: En este ejemplo, solo mostramos un texto dentro de una etiqueta de encabezado.

import React, { Component } from "react";
 
class App extends Component {
    render() {
        return (
            <div className="App">
                <h1>Welcome Geek</h1>
            </div>
        );
    }
}
 
export default App

Producción:

4. componentDidMount(): Después de representar el componente, se llama a componentDidMount() . Funciona cuando el elemento ya está en el DOM.

Ejemplo: en este ejemplo, estamos creando un componenteDidMount() con una función setTimeout que cambia el nombre del estado de ‘usuario’ a ‘GeekUser’ después de 2 segundos.

import React,{Component} from "react";
 
class App extends Component {
   constructor(props) {
      super(props);
      this.state = {name:'user'};
   }
   componentDidMount() {
    setTimeout(() => {
      this.setState({name: "GeekUser"})
    }, 2000)
  }
render() {
   return (
      <div className="App">
        <h1>Welcome {this.state.name}</h1>
      </div>
     );
   }
 }
 
export default App

Producción:

¿Cómo podemos encontrar el orden de los métodos del ciclo de vida en el montaje?

En este ejemplo estamos sumando las cuatro funciones juntas. Primero, estamos creando un constructor que tendrá el mensaje console.log, luego estamos creando un getDerivedStateFromProps() estático que también mostrará un mensaje en la consola y devolverá un valor nulo.

Para los métodos render() y ComponentDidMount() también estamos agregando algo de texto para ver en la consola.

Ejemplo: Después de ejecutar el código, el orden en que aparecen los mensajes asociados a los métodos en la consola es el orden que siguen durante el montaje.

import React from "react";
 
class App extends React.Component {
    constructor(props) {
        super(props);
        console.log("This is Constructor");
        this.state = { color: 'red' };
    }
    static getDerivedStateFromProps() {
        console.log("getDerivedStateFromProps()");
        return null;
 
    }
    componentDidMount() {
        console.log("componentDidMount");
    }
    render() {
        console.log("render");
 
        return (
            <div></div>
        );
    }
}
 
export default App

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Ahora, abra el inspector Ctrl + Shift + C y haga clic en la pestaña de la consola.

Producción:

Podemos ver que este es el orden del método del ciclo de vida en el montaje. Primero monta el método constructor() , luego el método getDerivedStateFromProps() , seguido del método render() y luego el método componentDidMount() .