Ciclo de Vida de Componentes Web en el DOM
Contenido del curso
Carlos Eduardo Gomez García
Jimmy Buriticá Londoño
Luis Alejandro Vera Hernandez
Fernando Quinteros Gutierrez
Héctor Iván Sáenz Estrada
Andres Felipe Pinchao Ramirez
Luis Guilermo Figueroa Hernandez
Luis Alejandro Vera Hernandez
Leonardo Moreno Faberón
Kenneth Angulo L
Kenneth Angulo L
Kenneth Angulo L
Jefred Bedoya
Daniel Triana
David Cruz Portilla
Mauro Nava
Jorge Arias Argüelles
daniel.becerril
daniel.becerril
daniel.becerril
daniel.becerril
daniel.becerril
Leonardo Moreno Faberón
. Más información sobre este lifecycle aquí (en español): . Usando callbacks de ciclo de vida .
Excelente resumen
Super, me servirá para repasar
♻️ Ciclo de vida de un componente
Apuntes
Cada vez que instanciamos una clase, lo primero que pasa es que se llama el método constructor(), el cual tiene como propósito crear en memoria un objeto nuevo y dentro de el guardar los datos que previamente escribimos en el. . Es por esto que es una mala practica pintar el template desde el constructor, primero debemos asegurarnos de que en memoria este creada la nueva instancia de la clase y luego dejarle la responsabilidad de pintar el template al método connectedCallback()
MY NOTES LIFE CYCLE OF A COMPONENT :D
El ciclo de vida de un componente están 100% ligados al dom porque son estándares y esto existe en el navegador son parte del critical renderig path
Constructor
El constructor hace parte de las clases con las que vamos a construir un componente, este es el primer paso del ciclo de vida porque en el critical rendering path junto con el engine de js cuando generamos un constructor estamos guardando en memoria de js que es lo que tiene nuestro constructor y que hace parte también de la clase.
También porque estamos generando una clase que extiende de otra.
Connected Callback
Cuando el elemento que seria nuestro componente ya hace parte del dom y aqui es cuando podes realizar cierta actividad importante del componente como empezar a renderizar todo el html y css.
Es mala practica pintar el template directamente esto es malo ya que en el constructor debemos asegurarnos que todo lo que tiene que estar en memoria exista en ese momento para cuando queramos pintar el elemento en el dom
Disconected Callback
El momento en que quitamos un elemento lo estamos desconectando del dom, esto es importante ya que en el momento de eliminar estos elementos pueden tener cierta funcionalidad que también tenemos que desconectar para liberar memoria.
AttributeChangedCallback
Es importante porque es la forma en la cual adentro del componente vamos a ver los atributos de nuestra etiqueta html que es nuestro componente que va a tener
Si tenemos ciertos cambios en los atributos este nos lo va a indicar para poder hacer cambios adentro del componente
AdoptedCallback
!Es algo que nunca vas a utilizar
Porque es cuando ocupas un componente dentro de un iframe por ejemplo.
Y es mala practica utilizarlo por permance y por mala experiencia para el usuario.
les comparto un ejemplo del ciclo de vida 😀: ciclo de vida
Ciclo de vida de un componente
Para guardar en memoria nuestro componente, como las variables usaremos el CONSTRUCTOR()
Ciclo de vida de los web components
OK, ya me estoy imaginando que el componente esta escrito en JS. (Obvio de esto se trata el curso). El contenido es escrito en HTML supongo, pero aun no entiendo donde le encajamos los estilos.
Bueno vamos entiendiendo poco a poco.
¿Cuándo debo usar el connectedCallback en mi código?
Debes utilizar el connectedCallback exactamente en el instante en que necesitas que tu componente cobre vida visual e interactiva. Imagina que este método es el interruptor de luz de una habitación: antes de presionarlo, la habitación existe, pero no puedes ver nada.
En términos prácticos, aquí es donde debes inyectar tu HTML, aplicar tus estilos CSS y realizar llamadas a APIs externas si tu componente necesita cargar datos iniciales. Como en este punto el nodo ya está oficialmente insertado en el DOM, el navegador puede calcular sus dimensiones, aplicar estilos globales y permitir que el usuario interactúe con él. Si estás construyendo, por ejemplo, un reproductor de video personalizado, este es el lugar ideal para dibujar los botones de reproducción y asegurarte de que la interfaz esté lista para recibir clics.
¿Cómo reacciona un componente al cambiar sus atributos?
Reacciona de manera automática y en tiempo real, funcionando como un sistema de vigilancia. El attributeChangedCallback se activa instantáneamente cada vez que un atributo específico de tu etiqueta HTML se añade, se elimina o modifica su valor.
Por ejemplo, si tienes un componente <mi-boton color="azul"> y mediante JavaScript cambias ese atributo a color="rojo", este ciclo de vida detecta el cambio exacto. Te proporciona tres datos clave: el nombre del atributo modificado, su valor anterior y su nuevo valor. Con esta información, puedes programar tu componente para que se re-renderice o actualice su interfaz visual sin necesidad de recargar la página. Es la herramienta perfecta para crear componentes dinámicos que respondan a las interacciones del usuario, como cambiar el tema de claro a oscuro o actualizar una barra de progreso.
Ciclo de Vida de los Componentes Web
El ciclo de vida define cómo existe y se comporta un componente dentro del Critical Rendering Path del navegador.
Fases Principales
iframe. Su uso es poco frecuente debido a problemas de rendimiento y seguridad.Por que renderizar el componente en el constructor() es mala practica?
Por qué es una mala práctica utilizar iframes?
El ciclo de vida de los Web Components incluye:
Estos ciclos son esenciales para gestionar la memoria y la funcionalidad de los componentes en el DOM.
adoptedCalback()
attributeChangedCallback()
disconnectedCallback()
connectedCallback()
Constructor()
constructor