Компонент SkateJS проходит ряд этапов от создания до удаления. Эти этапы определяют способ и момент инициализации, рендеринга, обновления и освобождения ресурсов. Управление жизненным циклом даёт возможность эффективно работать с состоянием, DOM и внешними зависимостями.
Создание экземпляра компонента происходит при подключении кастомного элемента к DOM. На этом этапе формируются внутренние структуры, подготавливаются значения по умолчанию и свойства, которые будут участвовать в реактивности. SkateJS использует декларативный подход: свойства объявляются статически, после чего движок связывает их с системой обновлений.
Ключевые элементы инициализации:
props для типов и значений по
умолчанию;shadow: true);Инициализация сознательно минимальна: SkateJS стремится избежать дорогостоящего DOM-дерева до момента явного рендера.
Первый рендер вызывается при подключении компонента к документу. В
этот момент формируется итоговая разметка, связываются обработчики
событий и вычисляется первоначальное состояние интерфейса. SkateJS может
использовать разные стратегии рендера (например, через
lit-html), но логика жизненного цикла остаётся
неизменной.
Особенности первого рендера:
Рендеринг не производится при простом создании объекта компонента; он инициируется только при включении в DOM. Это даёт возможность создавать компоненты в памяти без избыточных операций.
Обновление компонента происходит при изменении реактивных свойств. SkateJS отслеживает изменения и вызывает повторный рендер, агрегируя изменения для оптимизации производительности. Повторный рендер не пересоздаёт компонент полностью: сохраняются обработчики, состояние и DOM, если нет явной необходимости их перестроить.
Основные механизмы обновления:
Система рендера не требует ручного управления: достаточно изменить свойство, и SkateJS обеспечит корректный повторный рендер.
Компоненты нередко взаимодействуют с внешними источниками: сетевыми запросами, состоянием приложения, сторонними библиотеками. Жизненный цикл SkateJS предоставляет точки, позволяющие безопасно подключать ресурсы после того, как DOM сформирован, а также удалять их при удалении компонента.
Важные аспекты взаимодействия:
Синхронизация выполняется после рендера, когда DOM уже доступен и стабилен.
Когда компонент удаляется из DOM, SkateJS вызывает процедуру отключения. На этом этапе происходят очистка внешних подписок, удаление слушателей событий и, при необходимости, освобождение памяти. Правильная реализация этой стадии предотвращает утечки.
Основные этапы удаления:
Удаление не обязательно уничтожает сам объект компонента, но гарантирует отсутствие утечек и зависаний при повторном включении.
Жизненный цикл SkateJS построен вокруг идеи естественного обновления интерфейса. Компонент способен пережить множество обновлений состояния без разрушения DOM-дерева. Такая модель упрощает реализацию сложных UI-механизмов, поддерживая чистоту структуры и предсказуемость поведения.
Ключевые преимущества подхода:
Механизмы жизненного цикла SkateJS формируют фундамент для построения устойчивых пользовательских интерфейсов, где состояние определяет отображение, а компоненты остаются автономными и предсказуемыми.