¿Qué es el método ComponentWillMount() en ReactJS?

React requiere varios componentes para representar una unidad de lógica para una funcionalidad específica. El enlace del ciclo de vida del componenteWillMount es una opción ideal cuando se trata de actualizar la lógica comercial, las actualizaciones de configuración de la aplicación y las llamadas a la API. 

El gancho del ciclo de vida del componenteWillMount() se usa principalmente para implementar la lógica del lado del servidor antes de que ocurra la representación real, como hacer una llamada API al servidor. El método componentWillMount() nos permite ejecutar el código React sincrónicamente cuando el componente se carga o monta en el DOM (Document Object Model). Este método se llama durante la fase de montaje del ciclo de vida de React.

ComponentWillMount() generalmente se usa para mostrar un cargador cuando se carga el componente o cuando se obtienen los datos del servidor.

Características:

• Nos permite modificar los contenidos antes de mostrárselos al usuario final, lo que crea una mejor impresión para el usuario final; de lo contrario, se le puede mostrar cualquier cosa al usuario final.
• Debido a que es un método definido por el sistema de reacción, si queremos lograr la misma funcionalidad con la ayuda de escribir cualquier función personalizada, entonces no podrá brindarnos el mismo rendimiento ya que es parte del ciclo de vida de React y, por lo tanto, está optimizado.

Sintaxis:

• Antes de realizar cualquier actividad, lo primero que llamarán es el constructor y luego llamarán a la función componentWillMount().
• Dentro de esta función, podemos realizar algunas de las actividades importantes, como la modificación de la vista HTML para los usuarios finales, etc.
• Lo siguiente se llamará para renderizar, como ya hemos hecho algunas modificaciones en la sección componentWillMount(), el valor modificado se mostrará en el extremo del usuario.

componentWillMount() {
    // Perform the required
    // activity inside it
}
 
// Call the render method to
// display the HTML contents.
render(){
}

Crear una aplicación de reacción:

Paso 1: Ejecute el siguiente comando para crear un nuevo proyecto

npx create-react-app my-app

Paso 2: El comando anterior creará la aplicación y puede ejecutarla usando el siguiente comando y puede ver su aplicación en su navegador.

cd my-app
npm start

Estructura del proyecto: se verá así

App.js : 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.

ComponentWillMount para manipular State(): el gancho de ciclo de vida componentWillMount() se activa antes del renderizado inicial, y la función solo se activará una vez en la vida útil de un componente. Una vez que se inicia el componente, el valor del estado actual se anulará con el valor actualizado, pero tenga en cuenta que esto sucede una vez en la vida de un componente. Y el último paso es imprimir el mensaje dentro de la función render(), como se muestra a continuación.

import React, { Component } from "react";
 
 
class App extends Component{
constructor() {
    super();
    this.state = {
      message: "This is initial message"
    };
}
 
componentWillMount() {
    this.state = {
      message: "This is an updated message"
    };
}
 
render() {
    return (
      <div>
        <h2>Update the state</h2>
        <h3>  {this.state.message} </h3>
        
      </div>
    );
}
};
 
export default App;

Explicación: cuando ejecutamos el ejemplo anterior, el valor de la variable del mensaje se actualiza una vez que se inicia el componente; esta es la forma estándar de manipular la lógica empresarial.

Producción:

ComponentWillMount() para hacer llamadas a la API: componentWillMount() es para hacer llamadas a la API una vez que se inicia el componente y configurar los valores en el estado. Para realizar una llamada API, use un HttpClient como Axios, o podemos usar fetch() para activar la llamada AJAX. La función con la llamada a la API fetch() se muestra a continuación. fetch() se usa junto con la URL ficticia de la API, que accede al servidor y obtiene los datos; al final, la respuesta se actualiza en la variable de estado todo, que contiene el objeto. Después de obtener la respuesta de la API, podemos consumir los datos según los requisitos. A continuación se muestra un ejemplo completo de este

URL de API ficticia: https://jsonplaceholder.typicode.com/todos/3

import React, { Component } from "react";
 
class ApiCall extends Component {
  constructor() {
    super();
    this.state = {
      todo: {}
    };
  }
 
  componentWillMount() {
    fetch("https://jsonplaceholder.typicode.com/todos/3")
      .then(response => response.json())
      .then(json => {
        this.setState({ todo: json });
      });
  }
 
  render() {
    const { todo } = this.state;
    console.log(todo)
    return (
      <div>
         
<p>API call :</p>
 
 
        Todo title :
<p>{todo.title}</p>
 
 
        Todo completed :
         
<p>{todo.completed === true ? "true" :
                            "false"}</p>
 
      </div>
    );
  }
}
 
export default ApiCall;

Producción:

Nota: cambiar el valor de estado dentro de componentWillMount no volverá a ejecutar el componente una y otra vez, a diferencia de otros métodos de ciclo de vida.