connectedCallback i disconnectedCallback
Uruchamianie kodu po dodaniu niestandardowego elementu do DOM lub jego usunięciu
connectedCallback i disconnectedCallback to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Metody cyklu życia elementu
Niestandardowe elementy udostępniają cztery punkty cyklu życia: connectedCallback, disconnectedCallback, attributeChangedCallback oraz adoptedCallback. Odpowiadają one znanym punktom montowania, odmontowywania i aktualizacji w dowolnym modelu komponentów.
connectedCallback jest wywoływane przy wstawianiu
connectedCallback jest uruchamiane za każdym razem, gdy element zostaje wstawiony do drzewa DOM. To właściwe miejsce na odczytywanie atrybutów, renderowanie zawartości, dołączanie odbiorników zdarzeń oraz uruchamianie timerów lub subskrypcji.
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}Może zostać wywołane więcej niż raz
Jeśli element zostanie usunięty i ponownie wstawiony, connectedCallback zostanie wywołany ponownie przy każdym wstawieniu. Idempotencja ma znaczenie — inicjalizację, która powinna wykonać się tylko raz, należy zabezpieczyć flagą albo przeprowadzać pełną konfigurację za każdym razem i pozwolić disconnectedCallback wykonać sprzątanie.
disconnectedCallback przy usunięciu
disconnectedCallback jest wywoływana, gdy element zostaje usunięty z DOM-u. To tutaj należy zatrzymać interwały, przerwać żądania fetch, usunąć nasłuchiwacze zdarzeń na poziomie dokumentu i zwolnić zasoby, które w przeciwnym razie mogłyby wyciekać.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}Odśmiecanie pamięci i nasłuchiwacze
Element z aktywnym interwałem, nasłuchiwaczem dokumentu lub nierozstrzygniętym Promise nie zostanie usunięty przez garbage collector nawet po odłączeniu. Każdą subskrypcję utworzoną w connectedCallback należy zawsze powiązać ze sprzątaniem w disconnectedCallback.
Ponowne połączenie po przeniesieniu
Przeniesienie elementu za pomocą parentB.appendChild(element) najpierw usuwa go z parentA, a następnie wstawia do parentB. Przeglądarka wywołuje disconnectedCallback, a następnie connectedCallback. Należy uwzględnić przejściowe sprzątanie i ponowną konfigurację podczas przenoszenia.
Moment początkowego połączenia
W przypadku elementu zapisanego bezpośrednio w HTML connectedCallback jest wywoływana podczas początkowego parsowania, po konstruktorze. Atrybuty są już wtedy sparsowane, dlatego odczytanie this.getAttribute("name") zwraca wartość z oznaczenia HTML.
Dzieci mogą nie być jeszcze sparsowane
W przypadku elementu, którego dzieci zadeklarowano w HTML, mogą one nie znajdować się jeszcze w DOM-ie w chwili wywołania connectedCallback (parser nadal pracuje). Jeśli potrzebują Państwo dostępu do zadeklarowanych dzieci, należy użyć MutationObserver albo odczytać dzieci wewnątrz requestAnimationFrame.
adoptedCallback
adoptedCallback jest wywoływana, gdy element zostaje przeniesiony do nowego dokumentu (zwykle za pomocą document.adoptNode). Większość aplikacji nigdy z tego nie korzysta — ma to znaczenie głównie w przypadku komponentów przenoszonych między ramkami iframe.
Połączenie z AbortController
Czysty wzorzec wygląda następująco: należy utworzyć AbortController w connectedCallback, przekazać { signal: this.controller.signal } do każdego addEventListener i fetch, a następnie wywołać this.controller.abort() w disconnectedCallback, aby usunąć je wszystkie naraz.
Unikanie ciężkich operacji w konstruktorze
Konstruktor jest wykonywany nawet wtedy, gdy element zostaje utworzony za pomocą document.createElement i nigdy nie zostanie wstawiony. Konstruktor należy ograniczyć do ustawiania początkowych wartości właściwości, a renderowanie, pobieranie danych i dołączanie nasłuchiwaczy odroczyć do connectedCallback.
Sprawdzenie wiedzy
Dlaczego subskrypcje i timery należy konfigurować w connectedCallback, a nie w konstruktorze elementu?
Podsumowanie
connectedCallback (wstawienie) i disconnectedCallback (usunięcie) wyznaczają początek i koniec aktywnego cyklu życia elementu. Nasłuchiwacze, interwały i żądania fetch należy konfigurować w connectedCallback, a usuwać je w disconnectedCallback, aby zapobiegać wyciekom. Obie metody mogą być wywoływane wielokrotnie — do czystego grupowego sprzątania należy używać AbortController.
Często zadawane pytania
Czy lekcja „connectedCallback i disconnectedCallback” jest bezpłatna?
Tak — pełny tekst „connectedCallback i disconnectedCallback” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „connectedCallback i disconnectedCallback”?
Uruchamianie kodu po dodaniu niestandardowego elementu do DOM lub jego usunięciu Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „connectedCallback i disconnectedCallback”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Definiowanie elementów za pomocą customElements.define
- connectedCallback i disconnectedCallback
- Obserwowane atrybuty i attributeChangedCallback
- Rozszerzanie wbudowanych elementów