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

Жизненный цикл компонента в FAST Element описывает последовательность этапов, через которые проходит элемент от момента его создания до удаления из DOM. Понимание этих этапов критично для управления состоянием компонента, оптимизации рендеринга и корректной работы реактивных свойств.

Создание и инициализация

Когда элемент создается с помощью customElements.define и появляется в DOM, вызывается конструктор класса, унаследованного от FASTElement. В конструкторе выполняются базовые действия:

  • Инициализация внутренних свойств.
  • Настройка реактивных наблюдателей (@observable).
  • Создание Shadow DOM, если используется шаблон через FASTElement.define.

Пример:

import { FASTElement, html, css, observable } from "@microsoft/fast-element";

const template = html<MyElement>`
  <div>${x => x.message}</div>
`;

const styles = css`
  div {
    color: blue;
  }
`;

class MyElement extends FASTElement {
  @observable message = "Привет, FAST!";
}

MyElement.define({ name: "my-element", template, styles });

На этапе создания шаблон еще не вставлен в DOM, поэтому любые операции с реальными узлами необходимо откладывать до следующего этапа жизненного цикла.

Подключение к DOM (connectedCallback)

Метод connectedCallback вызывается автоматически, когда элемент добавляется в DOM. FAST Element расширяет стандартное поведение, обеспечивая:

  • Автоматическую привязку реактивных свойств к шаблону.
  • Вставку и рендеринг шаблона.
  • Запуск всех наблюдателей, которые реагируют на изменение свойств после первого рендера.

Пример использования:

class MyElement extends FASTElement {
  connectedCallback() {
    super.connectedCallback();
    console.log("Элемент добавлен в DOM");
  }
}

Важно вызывать super.connectedCallback(), чтобы FAST Element смог корректно обработать привязку и вставку шаблона.

Отслеживание изменений свойств

FAST Element использует реактивную систему на основе декоратора @observable. При изменении свойства автоматически обновляется DOM:

class MyElement extends FASTElement {
  @observable message = "Привет";

  messageChanged(oldValue, newValue) {
    console.log(`Свойство message изменилось с "${oldValue}" на "${newValue}"`);
  }
}

Метод messageChanged вызывается каждый раз при изменении свойства message. Такой подход позволяет создавать компоненты с автоматическим обновлением без ручного вмешательства в DOM.

Обновление шаблона

FAST Element использует эффективный механизм диффинга для обновления только изменившихся частей шаблона. Это минимизирует операции с DOM и ускоряет рендеринг.

  • Однонаправленная привязка (x => x.property) обновляет только текстовые узлы.
  • Двухсторонняя привязка через bind позволяет синхронизировать свойства элемента с внешними источниками данных.

Пример:

const template = html<MyElement>`
  <input value="${x => x.message}" @input="${x => x.handleInput()}"/>
`;

class MyElement extends FASTElement {
  @observable message = "";

  handleInput(event) {
    this.message = event.target.value;
  }
}

Отключение от DOM (disconnectedCallback)

Метод disconnectedCallback вызывается, когда элемент удаляется из DOM. На этом этапе рекомендуется:

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

Пример:

class MyElement extends FASTElement {
  disconnectedCallback() {
    super.disconnectedCallback();
    console.log("Элемент удален из DOM");
  }
}

Обработка атрибутов и свойств

FAST Element синхронизирует атрибуты HTML с реактивными свойствами. Атрибуты конвертируются в соответствующие типы и обновляют реактивные свойства:

class MyElement extends FASTElement {
  @observable count = 0;
}

const elem = document.createElement("my-element");
elem.setAttribute("count", "5"); // Автоматически обновляет this.count

Если требуется кастомная логика конверсии, можно переопределить attributeChangedCallback.

Итерации рендера и обновлений

Каждое изменение реактивного свойства инициирует:

  1. Планирование обновления.
  2. Вызов всех методов propertyChanged соответствующих свойств.
  3. Частичный рендер изменившихся узлов.
  4. Вызов пользовательских коллбеков после рендера (через FASTElement.observe или подписку на события).

Это позволяет создавать высокопроизводительные и масштабируемые компоненты без лишних операций с DOM.

События жизненного цикла

FAST Element поддерживает события для отслеживания жизненного цикла:

  • connected — элемент вставлен в DOM.
  • disconnected — элемент удален из DOM.
  • propertyChanged — изменилось наблюдаемое свойство.

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

Рекомендации по проектированию компонентов

  • Использовать @observable для всех свойств, влияющих на рендеринг.
  • Делать операции с DOM только после connectedCallback.
  • Чистить ресурсы в disconnectedCallback.
  • Использовать методы propertyChanged для реактивной логики.
  • Разделять шаблон, стили и логику для улучшения читаемости и поддержки.

Жизненный цикл FAST Element обеспечивает предсказуемую и оптимизированную работу компонентов, позволяя управлять состоянием, рендерингом и взаимодействием с DOM без лишней сложности. Понимание каждого этапа позволяет создавать мощные веб-компоненты с высокой производительностью и масштабируемостью.

Оглавление