JavaScript Academy · Урок

Обратные вызовы жизненного цикла

Подключайтесь к изменениям подключения, отключения и атрибутов.

«Обратные вызовы жизненного цикла» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Жизненный цикл элемента

У пользовательских элементов есть определённый жизненный цикл. Браузер вызывает специальные методы Вашего класса в ключевые моменты:

connectedCallback — добавление в DOM
disconnectedCallback — удаление из DOM
attributeChangedCallback — изменение наблюдаемого атрибута
adoptedCallback — перенос в новый документ

connectedCallback

connectedCallback выполняется каждый раз, когда элемент вставляется в документ. Это идеальное место для вывода содержимого, получения данных или добавления глобальных обработчиков.

Он может срабатывать несколько раз, если элемент перемещают.

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

disconnectedCallback выполняется, когда элемент удаляется из DOM. Используйте его для очистки: удаляйте глобальные обработчики, отменяйте таймеры или закрывайте соединения, чтобы избежать утечек памяти.

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

Наблюдение за атрибутами

Чтобы реагировать на изменения атрибутов, необходимо объявить атрибуты для наблюдения с помощью статического геттера observedAttributes, который возвращает массив имён.

Только перечисленные атрибуты вызывают attributeChangedCallback.

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

Когда наблюдаемый атрибут добавляется, удаляется или изменяется, браузер вызывает attributeChangedCallback(name, oldValue, newValue). Используйте его, чтобы поддерживать соответствие выводимого содержимого атрибутам.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
      this.innerHTML = '<img src="' + newValue + '">';
    }
  }
}
customElements.define('avatar-image', AvatarImage);

Аргументы обратного вызова

attributeChangedCallback получает три аргумента:

name — какой атрибут изменился
oldValue — предыдущее значение (null, если атрибут только добавлен)
newValue — новое значение (null, если атрибут удалён)

Сравнивайте старое и новое значения, чтобы пропускать ненужную работу.

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

Начальные вызовы для атрибутов

Если при модернизации элемента у него уже есть наблюдаемый атрибут, attributeChangedCallback срабатывает для каждого такого атрибута один раз — до connectedCallback. Это позволяет автоматически инициализировать элемент из разметки.

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

Отражение свойств в атрибуты

Распространённый подход — предоставить свойство JavaScript, которое считывает атрибут и записывает в него значение. Это делает интерфейс удобным и одновременно сохраняет синхронизацию.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  get src() { return this.getAttribute('src'); }
  set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);

adoptedCallback

adoptedCallback выполняется, когда элемент перемещается из одного документа в другой (например, во фрейм iframe с помощью document.adoptNode). Он нужен редко, но завершает жизненный цикл.

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

Порядок жизненного цикла

Для элемента, записанного непосредственно в HTML, типичный порядок таков:

constructor
attributeChangedCallback (по одному разу для каждого присутствующего наблюдаемого атрибута)
connectedCallback

А позже, при удалении, вызывается disconnectedCallback.

Собираем всё вместе

Полный элемент объединяет все части: наблюдает за атрибутами, выводит содержимое при подключении, синхронизируется при изменении атрибута и выполняет очистку при отключении.

class GreetUser extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  connectedCallback() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() {
    const name = this.getAttribute('name') || 'Guest';
    this.textContent = 'Hello, ' + name;
  }
}
customElements.define('greet-user', GreetUser);

Быстрая проверка

Проверьте свои знания об обратных вызовах жизненного цикла.

Повторение

Вы изучили жизненный цикл пользовательского элемента:

connectedCallback выполняется при вставке — выводите содержимое здесь.
disconnectedCallback выполняется при удалении — выполняйте очистку здесь.
observedAttributes объявляет, за какими атрибутами нужно наблюдать.
attributeChangedCallback(name, old, new) реагирует на изменения.
adoptedCallback обрабатывает перенос между документами.

Далее мы изолируем стили и разметку с помощью теневого DOM.

Часто задаваемые вопросы

Урок «Обратные вызовы жизненного цикла» бесплатный?

Да — полный текст урока «Обратные вызовы жизненного цикла» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Обратные вызовы жизненного цикла»?

Подключайтесь к изменениям подключения, отключения и атрибутов. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Обратные вызовы жизненного цикла»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy