Método ReactJS UNSAFE_componentWillMount()

El método componentWillMount() se invoca justo antes de que nuestro componente React se cargue o monte en el DOM (Document Object Model). Se llama durante la fase de montaje del ciclo de vida de React , es decir, antes de render() . Se utiliza para obtener datos desde fuera del componente mediante la ejecución del código React de forma síncrona, lo que hace que nuestro componente se renderice con datos vacíos al principio porque este método no devuelve nada antes de que nuestro componente se renderice por primera vez. Como las llamadas de recuperación son asincrónicas, nuestro componente no espera a que finalice este método y continúa renderizándose.

El método componentWillMount() ha quedado obsoleto en las últimas versiones de React según este problema . Se recomienda usar el método componentDidMount() en su lugar, pero si aún queremos usar el componenteWillMount(), podemos hacerlo llamándolo UNSAFE_componentWillMount() . No se sugiere usar este método según React, es por eso que la palabra clave UNSAFE aparece al principio para dar un mensaje amable a todos los desarrolladores de React para que dejen de usar este método. Este método se puede usar para realizar una acción justo antes de que nuestro componente React se monte en el DOM.

Sintaxis:

class App extends Component {

  UNSAFE_componentWillMount() {
  
    //action you want to execute
     
  }
}

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: en este ejemplo, vamos a crear una aplicación que proporcione un mensaje de alerta antes de que nuestro componente React se cargue en el DOM. 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.

Nombre de archivo: App.js

import React from 'react';
class App extends React.Component {
 
  UNSAFE_componentWillMount() {
    // Performing an action
    alert(`Welcome to GeeksForGeeks portal`);
 
  }
 
  render() {
    return <h1>GeeksForGeeks</h1>;
  }
 
}
   
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

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Explicación: recibimos un mensaje de alerta a través del método UNSAFE_componentWillMount() antes de que nuestro componente se monte en el DOM y luego nuestro componente se cargue después de la representación. De esta manera, podemos realizar cualquier acción justo antes de que se cargue nuestro componente. Como puede ver, también aparece un mensaje de advertencia en la consola cuando se carga nuestro componente, lo que nos dice claramente que este método no se recomienda para el uso que ya discutimos anteriormente.