Отслеживание жизненного цикла

В библиотеке Slim.js жизненный цикл компонента играет ключевую роль в управлении его состоянием, рендерингом и взаимодействием с DOM. Каждый компонент проходит определённые этапы, начиная от инициализации и заканчивая удалением из DOM. Понимание этих этапов позволяет эффективно управлять ресурсами и предотвращать утечки памяти.

Инициализация компонента

Инициализация происходит в момент создания экземпляра класса компонента. На этом этапе Slim.js:

  • Создаёт объект компонента и привязывает его к DOM-элементу.
  • Настраивает реактивные свойства, объявленные через observedAttributes или props.
  • Подготавливает шаблон к первому рендерингу.

Метод constructor в компоненте Slim.js вызывается сразу после создания экземпляра. В нём допустимо:

  • Инициализировать внутренние переменные.
  • Подготовить структуру данных, не требующую доступа к DOM.

Прямой доступ к DOM на этом этапе может быть небезопасным, так как элемент ещё не присоединён к документу.

Подключение к DOM

После добавления элемента на страницу Slim.js вызывает метод connectedCallback(), который соответствует моменту подключения элемента к DOM. На этом этапе можно:

  • Взаимодействовать с DOM, используя this.querySelector или this.shadowRoot.
  • Подписываться на события, которые происходят в других компонентах.
  • Запускать асинхронные операции, например, загрузку данных с сервера.

connectedCallback вызывается один раз при добавлении элемента в DOM, что делает его идеальным местом для инициализации внешних зависимостей.

Обновление компонента

Slim.js использует реактивную модель для обновления компонентов при изменении свойств. Основные моменты обновления:

  • Любое изменение свойства, объявленного как наблюдаемое (observedAttributes), автоматически инициирует повторный рендеринг.
  • Метод attributeChangedCallback(name, oldValue, newValue) вызывается при изменении атрибутов, связанных с реактивными свойствами. Это позволяет реагировать на внешние изменения и синхронизировать состояние.
  • Метод render() отвечает за генерацию DOM-структуры на основе текущего состояния компонента. Slim.js автоматически вызывает render() при изменении реактивных свойств.

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

Отключение компонента

Удаление компонента из DOM сопровождается вызовом метода disconnectedCallback(). Этот этап важен для освобождения ресурсов и предотвращения утечек памяти. В disconnectedCallback рекомендуется:

  • Снимать подписки на события.
  • Отменять таймеры и интерваллы.
  • Завершать асинхронные операции, которые больше не нужны.

Метод вызывается один раз при удалении элемента из DOM, что позволяет корректно завершать работу компонента и избегать накопления “висящих” обработчиков.

Примеры использования жизненного цикла

class MyComponent extends Slim {
  static get observedAttributes() {
    return ['title', 'count'];
  }

  constructor() {
    super();
    this.count = 0; // инициализация внутреннего состояния
  }

  connectedCallback() {
    console.log('Компонент добавлен в DOM');
    this.fetchData();
  }

  disconnectedCallback() {
    console.log('Компонент удалён из DOM');
    clearInterval(this.timer);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Атрибут ${name} изменён с ${oldValue} на ${newValue}`);
  }

  fetchData() {
    // пример асинхронной операции
    this.timer = setInterval(() => this.count++, 1000);
  }

  render() {
    return `<div>
              <h1>${this.title}</h1>
              <p>Счётчик: ${this.count}</p>
            </div>`;
  }
}

Slim.tag('my-component', MyComponent);

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

Особенности жизненного цикла Slim.js

  • Методы жизненного цикла строго определены стандартом Web Components, что обеспечивает совместимость с другими библиотеками и фреймворками.
  • Slim.js автоматически отслеживает изменения реактивных свойств и управляет рендерингом без необходимости ручного обновления DOM.
  • Подключение к DOM может происходить многократно при перемещении элементов, но constructor вызывается только один раз.

Эффективное использование жизненного цикла компонентов позволяет строить масштабируемые приложения, минимизировать затраты ресурсов и поддерживать чистоту кода.

Оглавление