¿Cuáles son los métodos de ciclo de vida de componentes en React JS?

Como todos nosotros, ¡los componentes de React también nacen, crecen y mueren!

(Habilelabs) (7 de diciembre de 2020)

Por Payal Mittal

métodos de ciclo de vida de componentes en reactjs
Métodos de ciclo de vida de componentes en React.js

Cada componente de la clase React pasa por una serie de» métodos del ciclo de vida ”. Básicamente, todo en React consta de componentes o una parte de los componentes.

Estos componentes están sujetos a seguir un ciclo de vida determinado, casi como el de cualquier criatura viviente en la tierra. Nacen, crecen y finalmente mueren. La fase en la que nacen se llama montaje, cuando crecen se llama actualización, y la última fase de la muerte se conoce como desmontaje.

Todo este proceso se llama «ciclo de vida de los componentes». Para cada una de estas fases, React.js representa ciertos métodos incorporados denominados métodos de ciclo de vida que controlan el comportamiento de los componentes dentro de una aplicación.

En este blog, repasaremos este ciclo de vida y obtendremos para conocer estos métodos de ciclo de vida:

¿Qué son los métodos de ciclo de vida de componentes?

Los métodos del ciclo de vida de los componentes se dividen en tres fases diferentes, como:

  • Montaje
  • Actualización
  • Desmontaje

El ciclo de vida completo del componente se puede entender con esta simple ilustración visual:

Diagrama del ciclo de vida del componente

Ahora, discutiremos cada una de las fases y sus métodos en detalle. Vayamos entonces –

✔ Métodos de ciclo de vida de montaje

Después de completar el componente inicialización, comienza el montaje del componente en el que el componente se crea e inserta en el DOM.

Aquí, discutiremos los métodos de ciclo de vida más comúnmente usados:

1. constructor ()

El constructor() se llama primero antes de que comience el montaje y se usa básicamente para servir estos dos propósitos-

  • Para inicializar el estado local de un componente
  • Para enlazar manejo de eventos métodos a una instancia

En lugar de usar setState(), puede asignar directamente el estado inicial a this.state() en el método constructor. Así es como podemos definir nuestro estado:

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

¡El siguiente en la línea es el método render()! Monta el componente en el DOM y lo muestra en la interfaz de usuario. Este método se invoca para examinar los atributos this.state y this.props siempre que haya alguna variación en los state o props.

render es el método más utilizado de todos en React. Si desea representar elementos en el DOM, entonces render() es el método que debe esperar porque puede escribirlos aquí.

Siempre que se llame, puede regresar muchos tipos, es decir, cadenas, números, matrices, fragmentos, valores booleanos o null , portal o elementos React. Aquí se dan algunos ejemplos:

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Nota : Si el método componentShouldMount devuelve un false booleano, no se invocará el método de procesamiento.

3. componentDidMount ()

Este método se llama inmediatamente después de que el componente se inserta en el DOM mediante el método render . Se llama solo una vez en un ciclo de vida.

  • Si está buscando configurar alguna suscripción, este es un lugar tan bueno como cualquier otro para hacerlo. Pero tendrá que cancelar la suscripción en componetWillUnmount().
  • Además, es un buen lugar para crear una instancia de una solicitud de red si necesita cargar datos desde un endpoint.
  • Incluso puede llamar a setState() aquí. Aunque volverá a activar una renderización, al menos no verá el estado intermedio. Sin embargo, debe tener cuidado al usar esto porque causa problemas de rendimiento. De hecho, debería asignar el estado inicial en el método constructor(), como se recomienda. Pero este enfoque es útil cuando necesita medir un nodo DOM antes de renderizar algo que depende de su tamaño.

✔ Actualización de los métodos del ciclo de vida

A diferencia de Montaje que ocurre solo una vez mientras se monta el componente, la fase de Actualización puede ocurrir varias veces.

Siempre que haya algún cambio en los accesorios / estado del componente que necesita ser actualizado, un temporizador llama para que render y componentDidupdate reconozcan, actualicen y procesen el cambio, entra en juego la fase de actualización.

1. static getDerivedStateFromProps ()

Este es el primer método que se llama en la fase de actualización del ciclo de vida. Se puede llamar varias veces porque se invoca cada vez que se inicia el método render . Por lo tanto, es obvio que se llama durante las fases de montaje y actualización.

Este método no es muy común y rara vez se usa en casos específicos, por ejemplo, cuando el estado del componente varía con los cambios en los accesorios a lo largo del tiempo. Como su nombre lo indica, deriva el estado de los accesorios.

2. shouldComponentUpdate ()

Este método se llama cuando el componente está a punto de volver a renderizarse. Determina si los cambios actuales en states / props están afectando la salida del componente. Solo se utiliza como un medio de optimización del rendimiento y avísanos «si el componente se actualiza o no», que se expresa mediante booleano true o false valores. De forma predeterminada, devuelve true.

Si

shouldComponentUpdate() devuelve false valor, significa que le está diciendo a React que omita esta actualización y, por lo tanto, no se llamarán a los métodos render y componentDidUpdate.

Funcionamiento del método shouldComponentUpdate

Sin embargo, también puede evitar el procesamiento innecesario mediante el uso de

React.PureComponent que le permite comparar el state / props nuevo y antiguo y hace que sea poco probable que omita cualquier actualización necesaria.

3. render ()

Luego viene render. Si se llamará o no, depende del valor devuelto por shouldComponentUpdate. Se activará solo en el caso de que se devuelva true .

4. getSnapshotBeforeUpdate ()

Después de llamar a render ,

getSnapshotBeforeUpdate viene a continuación. No se usa comúnmente, pero es muy útil en ciertos casos específicos, como cuando necesita acceder a alguna información en el DOM y cambiarla, justo después de que se haya actualizado.

Este método permite que el componente capturar cierta información (altura de desplazamiento) del DOM para que pueda ajustarse más tarde (después de la actualización). Sin embargo, debe comprender que la altura de desplazamiento capturada aquí indica la altura antes de que se actualizara a DOM.

Podemos pasar prevState y prevProps como argumentos, como se indica aquí –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Este método se invoca inmediatamente después de que el componente se actualiza y se vuelve a procesar. Recibe prevState y prevProps como parámetros y también puede acceder al estado o las propiedades recién modificadas.

Sin embargo, Se recomienda encarecidamente no establecer nunca directamente el estado dentro de esta función, de lo contrario, activará aún más render y componentDidUpdate.

A través de este método, podemos calcular la scrollHeight diferencia entre lo que era antes después de la actualización.

Este es solo un caso de uso, no son varios otros como –

👉 Para obtener datos del servidor

👉 Para acceder a los nodos DOM del componente React

Para obtener detalles sobre sus casos de uso , consulte la documentación oficial –

React.Component – React

Esta página contiene una referencia API detallada para la clase de componente React definición. Se asume que «está familiarizado con …

reactjs.org

✔ Desmontar métodos de ciclo de vida

Esta es la última fase en la que un componente de reacción pasa por donde se desmonta de DOM y se destruye. Solo hay un método de ciclo de vida en esta fase.

1. componentWillUnmount ()

componentWillUnmount El método se llama primero en la fase de desmontaje, justo antes de que se destruya el componente.Este es el lugar donde puede realizar cualquier método de limpieza, esencialmente cancelando solicitudes de red, invalidando temporizadores o limpiando suscripciones no deseadas que se crearon en el método componentDidMount .

Resumen:

Hay algunos otros métodos que se invocan en caso de que se produzca un error componente descendiente, estos métodos se denominan métodos de ciclo de vida de manejo de errores. Los encontrará aquí .

¡¡Eso fue todo programador !! Espero que comprenda mejor los métodos del ciclo de vida del componente React a través de este blog. Le responderemos pronto con otro blog interesante.

Till entonces, ¡feliz lectura! 🙃

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *