connectedCallback и disconnectedCallback
Выполняйте код при добавлении пользовательского элемента в DOM или его удалении из DOM
«connectedCallback и disconnectedCallback» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Колбэки жизненного цикла элемента
Пользовательские элементы предоставляют четыре колбэка жизненного цикла: connectedCallback, disconnectedCallback, attributeChangedCallback и adoptedCallback. Они соответствуют известным точкам монтирования, размонтирования и обновления в любой модели компонентов.
connectedCallback срабатывает при вставке
connectedCallback выполняется каждый раз, когда элемент вставляется в дерево DOM. Это подходящее место для чтения атрибутов, вызова render для отображения содержимого, добавления обработчиков событий и запуска таймеров или подписок.
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";
}
}Он может сработать несколько раз
Если элемент удалить и снова вставить, connectedCallback снова срабатывает при каждой вставке. Идемпотентность важна: защищайте инициализацию, которая должна выполняться только один раз, флагом либо полностью выполняйте настройку при каждом подключении и позволяйте disconnectedCallback выполнять очистку.
disconnectedCallback срабатывает при удалении
disconnectedCallback срабатывает, когда элемент удаляют из DOM. Здесь следует останавливать интервалы, прерывать запросы, удалять обработчики на уровне документа и освобождать любые ресурсы, которые иначе могли бы утечь.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}Сборка мусора и обработчики
Элемент с активным интервалом, обработчиком документа или неразрешённым промисом не будет собран сборщиком мусора даже после отключения. Всегда сопоставляйте каждую подписку, созданную в connectedCallback, с очисткой в disconnectedCallback.
Повторное подключение после перемещения
Перемещение элемента с помощью parentB.appendChild(element) сначала удаляет его из родителя A, а затем вставляет в родителя B. Браузер вызывает disconnectedCallback, а затем connectedCallback. Учитывайте промежуточную очистку и настройку при перемещениях.
Момент первоначального подключения
Для элемента, непосредственно записанного в HTML, connectedCallback срабатывает во время первоначального разбора, после конструктора. К этому моменту атрибуты уже разобраны, поэтому чтение this.getAttribute("name") здесь возвращает значение из разметки.
Дочерние элементы могут быть ещё не разобраны
У элемента с дочерними элементами, объявленными в HTML, дочерних элементов может ещё не быть в DOM в момент срабатывания connectedCallback: разбор всё ещё продолжается. Используйте MutationObserver или читайте дочерние элементы внутри requestAnimationFrame, если Вам нужен доступ к объявленным дочерним элементам.
adoptedCallback
adoptedCallback срабатывает, когда элемент перемещают в новый документ, обычно с помощью document.adoptNode. Большинство приложений никогда не используют этот механизм — главным образом он нужен для компонентов, перемещаемых между фреймами.
Использование вместе с AbortController
Удобный шаблон: создайте AbortController в connectedCallback, передайте { signal: this.controller.signal } каждому addEventListener и fetch, а затем вызовите this.controller.abort() в disconnectedCallback, чтобы удалить их все сразу.
Не выполняйте тяжёлую работу в конструкторе
Конструктор запускается даже тогда, когда элемент создан с помощью document.createElement и никогда не вставлен в документ. Ограничьте конструктор заданием начальных значений свойств; отложите отрисовку, получение данных и подключение обработчиков до connectedCallback.
Проверка знаний
Почему подписки и таймеры следует настраивать в connectedCallback, а не в конструкторе элемента?
Итоги
connectedCallback (вставка) и disconnectedCallback (удаление) обрамляют период активности элемента. Настраивайте обработчики, интервалы и запросы в connectedCallback, а удаляйте их в disconnectedCallback, чтобы предотвратить утечки. Оба метода могут срабатывать несколько раз — используйте AbortController для удобной пакетной очистки.
Часто задаваемые вопросы
Урок «connectedCallback и disconnectedCallback» бесплатный?
Да — полный текст урока «connectedCallback и disconnectedCallback» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «connectedCallback и disconnectedCallback»?
Выполняйте код при добавлении пользовательского элемента в DOM или его удалении из DOM Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «connectedCallback и disconnectedCallback»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Определение элементов с помощью customElements.define
- connectedCallback и disconnectedCallback
- Наблюдаемые атрибуты и attributeChangedCallback
- Расширение встроенных элементов