Saltar al contenido

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

En este artículo, exploraremos los métodos del ciclo de vida de ReactJS. Pero, antes de seguir adelante con los diferentes métodos de ciclo de vida de React, debemos entender qué es.
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 de React también lo hacen. Los componentes se crean (se montan 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.
Existen 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 según la fase en la que se encuentre 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 diferentes métodos? Echemos un vistazo a ellos.

Métodos de ciclo de vida

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

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

Analicemos los diferentes métodos de ciclo de vida que están 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 constructor (vea a continuación para comprender mejor la fase de inicialización).


class Initialize extends React.Component {


constructor(props)


{


// Calling the constructor of


// Parent Class React.Component


super(props);


// initialization process


this.state = {
date : new Date(),
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 después de que se completa la fase de inicialización. En esta fase, nuestro componente se renderiza por primera vez. Los métodos que están disponibles en esta fase son:
1. componenteWillMount ()
Este método se llama justo antes de que un componente se monte en el DOM o se llame 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 realizar cambios en los datos utilizando this.setstate en este método porque se llama antes que el método render. Por lo tanto, no se puede hacer nada con el DOM (es decir, actualizar los datos con la respuesta de la API) ya que no se ha montado. Por lo tanto, no podemos actualizar el estado con la respuesta de la API.
2. componentDidMount ()
Este método se llama después de que el componente se monta 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 render (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:


class LifeCycle extends React.Component {
componentWillMount() {
console.log('Component will mount!')
}
componentDidMount() {
console.log('Component did mount!')
this.getList();


}
getList=()=>{
/*** method to make api call***
}


render() {
return (
<div>
<h3>Hello mounting methods!</h3>
</div>
);
}
}

Actualizando

Esta es la tercera fase por la que pasa nuestro componente. Después de la fase de montaje en la que se ha creado el componente, entra en escena la fase de actualización. Aquí es donde cambia el estado del componente y, por lo tanto, se vuelve a renderizar.
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 re-renderizació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. De forma predeterminada, devuelve verdadero. Pero en algún momento, si desea volver a renderizar el componente en alguna condición, el método shouldComponentUpdate es el lugar correcto.
Suponga, por ejemplo, que solo desea volver a renderizar su componente cuando hay un cambio en la propiedad, luego utilice 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 de prop actual.
2. componentWillUpdate ()
Como otros métodos, su nombre también se explica por sí mismo. Se llama antes de que tenga lugar la reproducción del componente. Se llama una vez después del ‘ shouldComponentUpdate ‘método. Si desea realizar algún cálculo antes de volver a renderizar el componente y después de actualizar el estado y la propiedad, 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 renderizar el componente. Después de que el nuevo componente (actualizado) se actualice en el DOM, el ‘ componenteDidUpdate ‘se ejecuta el método. Este método recibe argumentos como prevProps y prevState.
Eche un vistazo para comprender mejor los métodos de actualización:


class LifeCycle extends React.Component {
constructor(props)
{
super(props);
this.state = {
date : new Date(),
clickedStatus: false,
list:[]
};
}


componentWillMount() {
console.log('Component will mount!')
}
componentDidMount() {
console.log('Component did mount!')
this.getList();


}
getList=()=>{
/*** method to make api call***
fetch('https://api.mydomain.com')
.then(response => response.json())
.then(data => this.setState({ list:data }));


}


shouldComponentUpdate(nextProps, nextState){
return this.state.list!==nextState.list
}
componentWillUpdate(nextProps, nextState) {
console.log('Component will update!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component did update!')
}


render() {
return (
<div>
<h3>Hello Mounting Lifecycle Methods!</h3>
</div>
);
}
}

Desmontaje

Esta es la última fase del ciclo de vida del componente. Como su nombre 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 lleve a cabo el desmontaje del componente. Antes de la eliminación del componente del DOM, ‘ componenteWillUnMount ‘ ejecuta. Este método denota el final del ciclo de vida del componente.
Aquí hay una representación de diagrama de flujo de los métodos del ciclo de vida:
Eso es todo sobre esta parte importante del mundo React: los métodos del ciclo de vida. Espero que hayas disfrutado leyéndolo.
¡Gracias!

Este contenido se publicó originalmente aquí.