Ciclo de vida disconnectedCallback en componentes web
Contenido del curso
Andres Felipe Pinchao Ramirez
Joel alexander
Roger Carlos Ariel Alba
Brandon Argel Verdeja Domínguez
Miguel Angel Reyes Moreno
MARTIN RAMIREZ RAMIREZ
Jose Funez
Naldo Duran
Kenneth Angulo L
Julian David Alzate Cuervo
Kenneth Angulo L
Jefred Bedoya
José Alberto Ramírez Quiroz
Fernando Campos
José Alberto Ramírez Quiroz
Jimmy Buriticá Londoño
Nazareno Aznar Altamiranda
Edgar Lopez Arroyo
MY NOTES FOR DISCONNECTED CALLBACK
disconnected callback nos servirá para deslindar de eventos a nuestros componente, dentro de esa función podremos retirarlos para liberar espacio en memoria.
class MyCustomElement extends HTMLElement{ constructor(){ super() //Aqui estamos establecieno en memoria las cosas que vamos a utilizar //Para nuestro componente console.log('hola desde el constructor - Memoria') //Pero esto no quiere decir que ya exista en el dom } //Para que exista en el dom llamaremos a nuestro siguiente ciclo de via connectedCallback(){ //Nuestro elemento ya existe como nodo en el dom entonces ya podemos generar //la interaccion console.log("hola desde el dom"); } disconnectedCallback(){ //Tercer ciclo de vida esto quiere decir que estamos retirando el elemento del dom console.log("adios del DOM"); } } //Definimos nuestro componente para utilizarlo como etiqueta customElements.define("my-custome-element", MyCustomElement); //Retiramos el elemento del dom seleccionandolo con un query selector //Y removiendolo con la funcion remove que sirve para eliminar nodos. document.querySelector("my-custome-element").remove();
Y los recursos??
Ya los puedes ver en la pestaña de archivos y enlaces.
disconnectedCallback
disconnectedCallback: Se invoca cada vez que el elemento se desconecta del DOM del documento.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Custom Elements</title> </head> <body> <my-custom-element></my-custom-element> <script type="module" src="./app.js"></script> </body> </html>
class MyCustomElement extends HTMLElement { constructor() { super() console.log('Hola desde el constructor - Memoria') } connectedCallback() { console.log('Hola desde el DOM') } disconnectedCallback() { console.log('Adios desde el DOM') } } customElements.define('my-custom-element', MyCustomElement); document.querySelector('my-custom-element').remove()
disconnectedCallback
La ventaja de usar este método, es que si por ejemplo usamos remove() tendríamos problemas con los nodos hijos conectados al elemento a remover. Pero disconnectedCallback nos ayuda a deslindar esta conexión.
Documentación de los callbacks de ciclo de vida
que diferencia a Diego si se le entiende, no como el otro curso de components que no se entiende nada
En el momento en que tengamos que remover un componente antes de quitarlo debemos de eliminar todas las funciones o variables propias del elemento para eso nos sirve el disconnectedCallback(){} una vez hecho esto podemos eliminar nuestro componente del DOM con remove()
document.querySelector("etiqueta-del-componente").remove()
.
¿Cuándo debo usar el disconnectedCallback exactamente?
Debes implementarlo siempre que tu componente web haya establecido conexiones o procesos continuos durante su ciclo de vida activo. Por ejemplo, si en tu connectedCallback iniciaste un temporizador con setInterval, te suscribiste a una API externa (como un WebSocket), o añadiste escuchadores de eventos globales al objeto window o document.
Si tu componente es estático y solo muestra información visual sin interacciones complejas, probablemente no necesites este método. Sin embargo, en aplicaciones dinámicas como dashboards, carritos de compras o modales que aparecen y desaparecen constantemente del DOM, es obligatorio usarlo. Piensa en este ciclo de vida como el camión de basura de tu componente: su trabajo es recoger todo lo que ya no sirve justo en el milisegundo en que el elemento desaparece de la pantalla.
en el script quito type="module" y me funciona pero cuando lo dejo no, alguien sabe a que se debe esto?
"type": "module"
Esta linea le indica que los javascript usados tendran la sintaxis de ECMA Script modules, asi cada archivo debe espcificar:
import express from 'express';
export const miFuncion = () => {};
De lo contrario seran tratados de forma predeterminada: commonjs
Es decir la forma tradicional basada en funciones.
El ciclo de vida disconnectedCallback
El disconnectedCallback es el método invocado automáticamente cuando un componente es eliminado del DOM. Su propósito principal no es solo la eliminación, sino la gestión de recursos.
¿Para qué sirve?
Comparativa de ciclos de vida
constructor: Inicialización en memoria.connectedCallback: El componente ya existe en el DOM y puede interactuar con él.disconnectedCallback: El componente es retirado del DOM; es el momento de realizar la limpieza final.y si quiero remover un elemento de adentro de el componente?
es decir por ejemplo un elemento p que esta adentro
Hola Puedes usar .remove() para eliminar elemente. Te comparto esta documentación al respecto.
Hola muchas gracias ya lo intente pero no e encontrado la forma de seleccionar el elemento
use document.querySelector(".propiedadDeEjemplo") pero no hace la seleccion tambien ya intente por Tag y por ByClassName
Terminamos la parte básica del ciclo de vida de los componentes, ahora vamos por los estilos.
Gracias crack, juro que no me había dado cuenta
class CustomElement extends HTMLElement { constructor() { super(); console.log('Hello from the constructor'); } connectedCallback() { console.log('Hello from the connected Callback'); } disconnectedCallback() { console.log('Goodbay! DOM'); } } customElements.define('my-custom-tag', CustomElement); document.querySelector('my-custom-tag').remove()```