Cómo comprender los métodos de ciclo de vida de un componente en ReactJS

En este artículo, vamos a explorar los métodos del ciclo de vida de ReactJS. Pero, antes de pasar a los diferentes métodos de ciclo de vida de React, debemos entender de qué se trata.

Como sabemos, todo en este mundo sigue un ciclo (digamos humanos o árboles). Nacemos, crecemos y luego morimos. Casi todo sigue este ciclo en su vida, y los componentes React también lo hacen. Los componentes se crean (montados en el DOM), crecen mediante la actualización y luego mueren (se desmontan en el DOM). Esto se conoce como un ciclo de vida del componente.

Hay diferentes métodos de ciclo de vida que React proporciona en diferentes fases de la vida de un componente. React llama automáticamente al método responsable de acuerdo con la fase en la que se encuentra el componente. Estos métodos nos dan un mejor control sobre nuestro componente y podemos manipularlos usando estos métodos.

En la actualidad, sabemos qué son los métodos del ciclo de vida y por qué son importantes. Entonces, ¿cuáles son estos métodos diferentes? Echemos un vistazo a ellos.

Métodos de ciclo de vida

El ciclo de vida de un componente se clasifica en general en cuatro partes:

  • inicialización
  • montaje
  • actualización y
  • desmontaje

Analicemos los diferentes métodos de ciclo de vida disponibles en estas diferentes fases (es decir, inicialización, montaje, actualización y desmontaje).

Inicialización

Esta es la fase en la que el componente comenzará su viaje configurando el estado (ver más abajo) y los accesorios. Esto generalmente se hace dentro del método del constructor (ver más abajo para comprender mejor la fase de inicialización).

clase Initialize extiende React.Component {
constructor (utilería)
{
// Llamando al constructor de
// Componente primario React.Component
super (accesorios);
// proceso de inicialización
this.state = {
   fecha: nueva Fecha (),
   clickedStatus: false
 };
}

Montaje

El nombre se explica por sí mismo. El montaje es la fase en la que nuestro componente React se monta en el DOM (es decir, se crea e inserta en el DOM).

Esta fase entra en escena una vez que se completa la fase de inicialización. En esta fase, nuestro componente se procesa por primera vez. Los métodos que están disponibles en esta fase son:

1. componentWillMount ()

Este método se llama justo antes de que se monte un componente en el DOM o se llama al método de representación. Después de este método, el componente se monta.

Nota: No debe realizar llamadas a la API ni ningún cambio de datos con this.setstate en este método porque se llama antes que el método de representación. Por lo tanto, no se puede hacer nada con el DOM (es decir, actualizar los datos con la respuesta API) ya que no se ha montado. Por lo tanto, no podemos actualizar el estado con la respuesta API.

2. componentDidMount ()

Este método se llama después de que el componente se monte en el DOM. Al igual que componentWillMount, se llama una vez en un ciclo de vida. Antes de la ejecución de este método, se llama al método de representación (es decir, podemos acceder al DOM). Podemos hacer llamadas a la API y actualizar el estado con la respuesta de la API.

Eche un vistazo para comprender estos métodos de montaje:

clase LifeCycle extiende React.Component {
  componentWillMount () {
      console.log ('¡El componente se montará!')
   }
  componentDidMount () {
      console.log ('¡El componente se montó!')
      this.getList ();
   }
  getList = () => {
   / *** método para hacer una llamada API ***
  }
  render () {
      regreso (
         
            

¡Hola, métodos de montaje!

         
      );    } }

Actualización

Esta es la tercera fase a través de la cual pasa nuestro componente. Después de la fase de montaje donde se creó el componente, la fase de actualización entra en escena. Aquí es donde cambia el estado del componente y, por lo tanto, se realiza una nueva representación.

En esta fase, los datos del componente (estado y accesorios) se actualizan en respuesta a eventos del usuario como hacer clic, escribir, etc. Esto da como resultado la nueva representación del componente. Los métodos que están disponibles en esta fase son:

  1. shouldComponentUpdate ()

Este método determina si el componente debe actualizarse o no. Por defecto, devuelve verdadero. Pero en algún momento, si desea volver a representar el componente en alguna condición, el método shouldComponentUpdate es el lugar correcto.

Supongamos, por ejemplo, que solo desea volver a renderizar su componente cuando hay un cambio en la utilería, y luego utilizar el poder de este método. Recibe argumentos como nextProps y nextState que nos ayudan a decidir si volver a renderizar haciendo una comparación con el valor actual de prop.

2. componentWillUpdate ()

Al igual que otros métodos, su nombre también se explica por sí mismo. Se llama antes de que tenga lugar la representación del componente. Se llama una vez después del método "shouldComponentUpdate". Si desea realizar algunos cálculos antes de volver a renderizar el componente y después de actualizar el estado y el accesorio, este es el mejor lugar para hacerlo. Al igual que el método "shouldComponentUpdate", también recibe argumentos como nextProps y nextState.

3. ComponentDidUpdate ()

Este método se llama justo después de volver a representar el componente. Después de que el nuevo componente (actualizado) se actualiza en el DOM, se ejecuta el método "componentDidUpdate". Este método recibe argumentos como prevProps y prevState.

Eche un vistazo para comprender mejor los métodos de actualización:

clase LifeCycle extiende React.Component {
  constructor (utilería)
  {
    super (accesorios);
     this.state = {
       fecha: nueva Fecha (),
       clickedStatus: false,
       lista:[]
     };
  }
  componentWillMount () {
      console.log ('¡El componente se montará!')
   }
  componentDidMount () {
      console.log ('¡El componente se montó!')
      this.getList ();
   }
  getList = () => {
   / *** método para hacer una llamada API ***
   fetch ('https://api.mydomain.com')
      .then (respuesta => respuesta.json ())
      .then (data => this.setState ({list: data}));
  }
   shouldComponentUpdate (nextProps, nextState) {
     devuelve this.state.list! == nextState.list
    }
   componentWillUpdate (nextProps, nextState) {
      console.log ('¡El componente se actualizará!');
   }
   componentDidUpdate (prevProps, prevState) {
      console.log ('¡El componente se actualizó!')
   }
  render () {
      regreso (
         
            

¡Hola, métodos de ciclo de vida de montaje!

         
      );    } }

Desmontaje

Esta es la última fase del ciclo de vida del componente. Como su nombre lo indica claramente, el componente se desmonta del DOM en esta fase. El método que está disponible en esta fase es:

1. componentWillUnmount ()

Este método se llama antes de que se desmonte el componente. Antes de eliminar el componente del DOM, se ejecuta "componentWillUnMount". Este método denota el final del ciclo de vida del componente.

Aquí hay una representación de diagrama de flujo de métodos de ciclo de vida:

De eso se trata esta parte importante del mundo React: los métodos del ciclo de vida. Espero que hayas disfrutado leyéndolo.

¡Gracias!