No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Ciclo de vida de un componente

6/22
Recursos

Aportes 16

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

  • 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 鈥渄estruye鈥 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

<h4>Apuntes</h4>
  • 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.

<h3>Ciclo de vida de los Web Components</h3> <h4>Ciclo de vida de un componente</h4>

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