Todos los componentes en React pasan por una serie de fases que generalmente se denominan “Ciclo de Vida del componente” es un proceso que React hace en cada componente, en algunos casos no podemos verlos como un bloque de código y en otros podemos llamarlos en nuestro componente para asignar una actividad según sea el caso necesario.
Los componentes en react pasan por un Montaje, Actualización, Desmontaje y Manejo de errores.
En esta fase nuestro componente se crea junto a la lógica y los componentes internos y luego es insertado en el DOM.
React llama a tres métodos en orden cuando ocurre el montaje:
<aside> 🌐 Traducción: Constructor
</aside>
Este es el primer método al que se hace un llamado, aquí es donde se inicializan los métodos controladores, eventos del estado.
constructor (props) {
}
<aside> 🌐 Traducción: Presentar
</aside>
Si queremos representar elementos en el DOM en este método es donde se escribe esta lógica, usualmente utilizamos JSX para trabajar y presentar nuestra aplicación.
render () {
return (
JSX
)
}
<aside> 🌐 Traduccion: Componente montado
</aside>
Este método se llama inmediatamente que ha sido montado en el DOM, aquí es donde trabajamos con eventos que permitan interactuar con nuestro componente.
**ComponentDidMount() {
//recibe una funcion asincrona
}**
En esta fase nuestro componente está al pendiente de cambios que pueden venir a través de un cambio en “state” o “props” esto en consecuencia realizan una acción dentro de un componente.
<aside> 🌐 Traducción: Obtener el estado derivado de las propiedades
</aside>
Este método es el primero en ejecutarse en la fase de actualización y funciona de la misma forma que en el montaje.
<aside> 🌐 Traducción: Debería actualizar componentes?
</aside>
Dentro de este método se puede controlar la fase de actualización, podemos devolver un valor entre verdadero o falso si queremos actualizar o no el componente y es utilizado principalmente para optimización.
<aside> 🌐 Traducción: Presentar
</aside>
Se llama el método render que representa los cambios en el DOM.
<aside> 🌐 Traducción: Componente actualizado
</aside>
Este método es invocado inmediatamente después de que el componente se actualiza y recibe dos argumentos las propiedades que tenia antes y el estado que tenia antes. Es donde podemos manejar nuestro componente.
**componentDidUpdate(prevProps, prevState) {
}**
En esta etapa nuestro componente “Muere” cuando nosotros no necesitamos un elemento de nuestra aplicación, podemos pasar por este ciclo de vida y de esta forma eliminar el componente de la representación que tiene en el DOM.
Esta última fase consiste en un solo método que se ejecuta antes de que un componente se elimine (desmonte) de la UI de nuestra aplicación.
<aside> 🌐 Traducción: El componente se desmontará
</aside>
Este único método de la fase de desmontado nos permite realizar cualquier tipo de limpieza antes de remover el componente.
**componentWillUnmount() {
}**
<aside> 💡 Acá es posible dejar de escuchar eventos de window, document o el DOM, desuscribirse de un WebSocket o Store o cancelar peticiones HTTP que hayan quedado pendientes.
</aside>
<aside> 🚧 Es importante hacer esta limpieza ya que si alguna petición pendiente se completa luego del desmontado, va a tratar de actualizar el estado y va a dar un error (y hasta un posible problema de memoria) ya que el componente no existe más.
</aside>
Cuando nuestro código se ejecuta y tiene un error, podemos entrar en una fase donde se puede entender mejor qué está sucediendo con la aplicación.
Algo que debemos tener en cuenta es que un componente NO debe pasar por toda las fases, un componente puede ser montado y desmontado sin pasar por la fase de actualización o manejo de errores.
Ahora que entendemos las fases que cumple el ciclo de vida en React vamos a entrar a detalle en cada uno de ellos para ver qué piezas de código se ejecutan y nos ayudarán a crear aplicaciones en React pasando por un ciclo de vida bien estructurado.
<aside> 🌐 Traducción: obtener estado derivado del error
</aside>
Una vez que se lanza un error este es el primer método que se llama, el cual recibe el error como argumento y cualquier valor devuelto en este método es utilizado para actualizar el estado del componente.
<aside> 🌐 Traducción: Componente capturado
</aside>
Este método es llamado después de lanzarse un error y pasa como argumento el error y la información representada sobre el error.