¿Cuáles son las diferentes fases del ciclo de vida del componente ReactJS?

Métodos de ciclo de vida: en ReactJS, el desarrollo de cada componente implica el uso de diferentes métodos de ciclo de vida. Todos los métodos de ciclo de vida utilizados para crear tales componentes, juntos constituyen el ciclo de vida del componente. Se definen como una serie de funciones invocadas en varias etapas de un componente. Cada fase de los componentes del ciclo de vida incluye algunos métodos de ciclo de vida específicos relacionados con esa fase en particular. Hay principalmente 4 fases involucradas en el ciclo de vida de un componente reactivo, como sigue.

1. Inicializando
2. Montaje
3. Actualizando
4. Desmontar

Fase 1: Inicialización 

Esta es la fase inicial del ciclo de vida del componente React. Como sugiere el nombre, esta fase involucra todas las declaraciones, definiciones e inicialización de propiedades, accesorios predeterminados y el estado inicial del componente requerido por el desarrollador. En un componente basado en clases, esto se implementa en el constructor del componente. Esta fase ocurre solo una vez a lo largo de todo el ciclo de vida. Los métodos incluidos en esta fase son:

• getDefaultProps(): el método invocado inmediatamente antes de que se cree el componente o cualquier accesorio del componente principal se pase a dicho componente (secundario). Se utiliza para especificar el valor predeterminado de los accesorios.
• getInitialState():  el método invocado inmediatamente antes de que se cree el componente y se utiliza para especificar el valor predeterminado del estado.

Fase 2: Montaje

La segunda fase del ciclo de vida del componente React, seguida de la fase de inicialización, es la fase de montaje. Comienza cuando el componente se coloca sobre el contenedor DOM (es decir, se crea una instancia del componente y se inserta en el DOM) y se representa en una página web. Consta de 2 métodos, a saber:

• componentWillMount(): el método invocado inmediatamente antes de que el componente se coloque en el DOM, es decir, justo antes de que el componente se represente en la pantalla por primera vez.
• componentDidMount(): el método invocado inmediatamente después de que el componente se coloca en el DOM, es decir, justo después de que el componente se representa en la pantalla por primera vez.

Fase 3: Actualización
La tercera fase del ciclo de vida del componente ReactJS es la fase de actualización. Seguido de la fase de montaje, actualiza los estados y las propiedades que se declararon e inicializaron durante la fase de inicialización (si es que se requieren cambios). También es responsable de manejar la interacción del usuario y pasar datos dentro de la jerarquía de componentes. A diferencia de la fase de inicialización, esta fase se puede repetir varias veces. Algunos de los métodos de ciclo de vida que entran en esta categoría son los siguientes:

• componentWillReceiveProps(): el método invocado inmediatamente antes de que se reasignen los accesorios de un componente montado. Acepta accesorios nuevos que pueden o no ser iguales a los accesorios originales.
• shouldComponentUpdate(): el método invocado antes de decidir si los accesorios recién renderizados deben mostrarse en la página web o no. Es útil en esos escenarios cuando existe tal requisito de no mostrar los nuevos accesorios en la pantalla.
• componentWillUpdate(): el método invocado inmediatamente antes de que el componente se vuelva a representar después de actualizar los estados y/o las propiedades.
• componentDidUpdate(): el método invocado inmediatamente después de que el componente se vuelve a representar después de actualizar los estados y/o las propiedades.

Fase 4: Desmontar
Desmontar es la última fase del ciclo de vida del componente ReactJS. Esta fase incluye los métodos de ciclo de vida que se utilizan cuando un componente se separa del contenedor DOM (es decir, la instancia del componente se destruye y se desmonta del DOM). También es responsable de realizar las tareas de limpieza requeridas. Una vez desmontado, un componente no se puede volver a montar. 

• componentWillUnmount(): el método invocado inmediatamente antes de que el componente se elimine del DOM por fin, es decir, justo cuando el componente se elimina por completo de la página y esto muestra el final de su ciclo de vida.
   

Ejemplo: Creación de la aplicación React:

• Paso 1: Cree una nueva aplicación de reacción usando el siguiente comando:

  npx create-react-app demo-app

• Paso 2: muévase al directorio de su proyecto usando el siguiente comando:

  cd demo-app

Ejemplo: ahora escriba el siguiente código en el archivo App.js.

import React, { Component } from "react";
  
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { myState: "GeeksforGeeks" };
    this.changeMyState = this.changeMyState.bind(this);
  }
  render() {
    return (
      <div style={{ textAlign: "center", marginTop: "5%", color: "#006600" }}>
        <h1>Phases of ReactJS Component Lifecycle</h1>
        <h3> {this.state.myState}</h3>
        <button onClick={this.changeMyState}>Click Me!</button>
      </div>
    );
  }
  
  componentWillMount() {
    console.log("Phase 2: MOUNTING -> Component Will Mount!");
  }
  
  componentDidMount() {
    console.log("Phase 2: MOUNTING -> Component Did Mount!");
  }
  
  // Changing in state 
  changeMyState() {
    this.setState({
      myState: "GeeksforGeeks Tutorial on Phases of ReactJS Lifecycle Methods!",
    });
  }
  
  // Props  receiver function 
  componentWillReceiveProps(newProps) {
    console.log("Phase 3: UPDATING -> Component Will Receive Props!");
  }
  
  shouldComponentUpdate(newProps, newState) {
  
    // Phase 3: UPDATING
    return true;
  }
  
  // Updation of component 
  componentWillUpdate(nextProps, nextState) {
    console.log("Phase 3: UPDATING -> Component Will update!");
  }
  
  componentDidUpdate(prevProps, prevState) {
    console.log("Phase 3: UPDATING -> Component Did update!");
  }
  
  // Unmount of component 
  componentWillUnmount() {
    console.log("Phase 3: UNMOUNTING -> Component Will unmount!");
  }
}
  
export default App;

Ejecute el archivo: puede guardar este archivo y luego ejecutar su aplicación localmente en localhost: 3000 usando este comando:

npm start

Producción: