Ciclo de vida de un componente

• constructor: Directamente desde el JavaScript Engine, el constructor nos servirá para definir y cargar todas las variables en memoria que necesitemos, es mala práctica pintar el componente aquí
• connectedCallback: Cuando el componente ya está pintado dentro del DOM ypodemos hacer uso de él.
• attributeChangedCallback: Cuando un atributo de nuestro componente cambia
• disconnectedCallback: Cuando el componente se “destruye” o se quita del DOM
• adoptedCallback: Cuando el componente es movido a un nuevo DOM, básicamente cuando es pintado desde un iframe por ejemplo 😄

.
Más información sobre este lifecycle aquí (en español):
.
Usando callbacks de ciclo de vida
.

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()

♻️ Ciclo de vida de un componente

• Son parte del critical Render Path
• Las clases cuando generamos un constructor generamos están guardando en memoria que es lo que tiene el constructor
  • Todos los componentes deben tener un constructor
  • Una mala práctica es pintar el template directamente el template en el constructor
    • En el constructor solo se debe asegurar todo lo que está en memoria exista para pintar el componente
• connectedCallback
  • Es cuando ya es un nodo del DOM
  • Aqui es donde se pueden renderizar el HTML y CSS
• disconnectedCallback
  • Es cuando quitamos del DOM (desconectar) el componente
  • Cuando queramos liberar memoria los cuales está consumiendo nuestro componente
• attibuteChangedCallback
  • Cuando exista un cambio de los atributos del componente este método nos avisara que cambiaron
• adoptedCallback
  • Cuando un componente va a ser adoptado en otra cosa como ser un iframe
  • No es muy usado

MY NOTES LIFE CYCLE OF A COMPONENT 😄

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.

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

les comparto un ejemplo del ciclo de vida 😀:
ciclo de vida

adoptedCalback()

attributeChangedCallback()

disconnectedCallback()

connectedCallback()

Constructor()

constructor

Solo sabia del constructor, de los demás no había escuchado o leído sobre estos métodos. Así que vamos allá!! 🤔

Llamadas de funciones especiales declaradas dentro de la clase de definición de los componentes personalizados, los que afectan su comportamiento:

connectedCallback: Invocado cuando el componente personalizado se conecta por primera vez al DOM del documento.
disconnectedCallback: Invocado cuando el componente personalizado se deconecta del DOM del documento.
adoptedCallback: Invocado cuando el componente personalizado se mueve a un nuevo documento.
attributeChangedCallback: Invocado cuando uno de los atributos del componente personalizado es añadido, removido o modificado.

El ciclo de vida de los Web Components está 100% ligado al DOM. Son parte fundamental del Critical Rendering Path.

Las clases tienen un constructor(), este es el paso #1 del ciclo del vida. El CRP con el Engine de JS guarda en memoria lo que tiene el constructor. Todos los componentes tienen que tener un constructor.

Luego en connectedCallBack() el componente ya existe en el DOM. Ya podemos hacer cosas como renderización.

MALA PRÁCTICA: hacer que en el constructor se pinte el template. En el constructor sólo tenemos que asegurarnos de que todo lo que esté en memoria exista en ese momento para usarlo en el connectedCallback().

Tenemos disconnectedCallback() cuando justamenete quitamos este elemento del DOM.

Tenemos atributos en las etiquetas HTML. Si presentamos cambios usamos atributeChangedCallback().

Un ciclo de vida que casi nunca vamos a utilizar es adoptedCallback() porque solamente se utiliza cuando usamos un componente dentro de iframe (y usarlo es una MUY MALA PRÁCTICA).