El “Ciclo de Vida del componente” es un proceso en el cual los componetentes de React, se renderizan, actulizan o desmontan de la pantalla del navegador.
Nos permite detrminar el estado de nuestro componente y ejecutar determidas lineas de código en momentos particulares del proceso para montar (mostrar en pantalla), actualizar o desmontar (quitar de pantalla) nuestro componente.
Fases del ciclo de vida:
El ciclo de vida de un componente en React abarca tres 3 fases, el montado, actualización y desmontado.
Dentro de cada fase existen métodos que las caracterizan, a continucación describire cada fase con sus respectivos metodos.
Montaje
Momento en el que se inserta el código del componente en el DOM y se muestra en la UI.
Los métodos más importantes que se ejecutan en esta fase son:
constructor()
En este método se incializan los estados o valores.
render()
En este método el componten se renderiza , se inserta el codigo en el DOM HTML.
componentDidMount()
Indica que el componente ya es visible en pantalla.
Actualización
En esta etapa los props y el estado del componente cambian.
Los métodos más importantes que se ejecutan en esta fase son:
render()
El componente se vuelve a renderizar, esta vez con los datos que hayan cambiado.
componentDidUpdate(prevProps, prevState)
Recibe dos argumentos: Los props anteriormente y el estado que tenia anteriormente el componente lo actualiza. este método nos sirve para comparar entre la versión previa y la versión actual del componente.
Desmontado
Esta fase existe un solo método que se ejecuta antes de que un componente se elimine (desmonte) de la UI de nuestra aplicación.
componentWillUnmount()
Este método nos permite limpiar memoria eliminando el componente de la pantalla.
Existe otros métodos de ciclo de vida pero son menos comunes.
Para saber más sobre los métodos del ciclo de vida puedes revisar la documentación de React.
Top comments (0)