Explicar el significado de montar y desmontar

Hemos visto hasta ahora que las aplicaciones web React son en realidad una colección de componentes independientes que se ejecutan de acuerdo con las interacciones realizadas con ellos. Cada componente de React tiene un ciclo de vida propio, el ciclo de vida de un componente se puede definir como la serie de métodos que se invocan en diferentes etapas de la existencia del componente. La definición es bastante sencilla, pero ¿qué queremos decir con diferentes etapas? Un componente React puede pasar por cuatro etapas de su vida de la siguiente manera.

• Inicialización: esta es la etapa en la que se construye el componente con los Props dados y el estado predeterminado. Esto se hace en el constructor de una Clase de Componente.
• Montaje: el montaje es la etapa de representación del JSX devuelto por el propio método de representación.
• Actualización: la actualización es la etapa en la que se actualiza el estado de un componente y se vuelve a pintar la aplicación.
• Desmontaje: como sugiere el nombre, el desmontaje es el paso final del ciclo de vida del componente en el que el componente se elimina de la página.

Here we will learn about Mounting and Demounting/Unmounting in Detail

Montaje: el montaje es la fase del ciclo de vida del componente cuando se completa la inicialización del componente y el componente se monta en el DOM y se representa por primera vez en la página web. Ahora React sigue un procedimiento predeterminado en las convenciones de nomenclatura de estas funciones predefinidas donde las funciones que contienen «Will» representan antes de alguna fase específica y «Did» representa después de la finalización de esa fase. La fase de montaje consta de dos funciones predefinidas, como se describe a continuación.

Función componentWillMount(): Como sugiere claramente el nombre, esta función se invoca justo antes de que el componente se monte en el DOM, es decir, esta función se invoca una vez antes de que se ejecute la función render() por primera vez.

import React from "react";
  
class ComponentOne extends React.Component {
  UNSAFE_componentWillMount() {
    console.log("Component is mounted in the DOM");
  }
  render() {
    return <h1>Hello Geeks!</h1>;
  }
}
  
class App extends React.Component {
  render() {
    return (
      <div>
        <ComponentOne />
      </div>
    );
  }
}
  
export default App;

Función componentDidMount(): De manera similar a la anterior, esta función se invoca justo después de que el componente se monta en el DOM, es decir, esta función se invoca una vez que la función render() se ejecuta por primera vez.

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
  
    // Initializing the state
    this.state = { color: "lightgreen" };
  }
  componentDidMount() {
      
    // Changing the state after 2 sec
    // from the time when the component
    // is rendered
    setTimeout(() => {
      this.setState({ color: "wheat" });
    }, 2000);
  }
  render() {
    return (
      <div>
        <p
          style={{
            color: this.state.color,
            backgroundColor: "rgba(0,0,0,0.88)",
            textAlign: "center",
            paddingTop: 20,
            width: 400,
            height: 80,
            margin: "auto",
          }}
        >
          GeeksForGeeks
        </p>
      </div>
    );
  }
}
export default App;

2. Desmontaje: Esta es la fase final del ciclo de vida del componente que es la fase de desmontaje del componente del DOM. La siguiente función es el único miembro de esta fase.

• Función componentWillUnmount(): esta función se invoca antes de que el componente se desmonte finalmente del DOM, es decir, esta función se invoca una vez antes de que el componente se elimine de la página y esto indica el final del ciclo de vida.

El método componentWillUnmount() nos permite ejecutar el código React cuando el componente se destruye o se desmonta del DOM (Document Object Model). Este método se llama durante la fase de desmontaje del ciclo de vida de React, es decir, antes de que se desmonte el componente.

Todas las limpiezas, como la invalidación de temporizadores, la cancelación de requests de red o la limpieza de suscripciones que se crearon en componentDidMount(), deben codificarse en el bloque de método componentWillUnmount().

Creando la aplicación React:

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

npx create-react-app functiondemo

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

cd functiondemo

Estructura del proyecto: Tendrá el siguiente aspecto. 

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.

import React from "react";
class ComponentOne extends React.Component {
    
  // Defining the componentWillUnmount method
  componentWillUnmount() {
    alert("The component is going to be unmounted");
  }
  
  render() {
    return <h1>Hello Geeks!</h1>;
  }
}
  
class App extends React.Component {
  state = { display: true };
  delete = () => {
    this.setState({ display: false });
  };
  
  render() {
    let comp;
    if (this.state.display) {
      comp = <ComponentOne />;
    }
    return (
      <div>
        {comp}
        <button onClick={this.delete}>
          Delete the component
        </button>
      </div>
    );
  }
}
  
export default App;

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

npm start

Producción: