Встроенные хуки

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

connected и disconnected

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

  • подписки на события;
  • инициализации сторонних библиотек;
  • запуска анимаций.
import { define, Component } from 'skatejs';

class MyElement extends Component {
  connected() {
    console.log('Элемент добавлен в DOM');
  }
}

define('my-element', MyElement);

disconnected вызывается при удалении элемента из DOM. В этом хукe рекомендуется:

  • отписываться от событий;
  • останавливать таймеры;
  • освобождать ресурсы, связанные с элементом.
disconnected() {
  console.log('Элемент удален из DOM');
}

prop и props

SkateJS поддерживает реактивные свойства компонентов через объект props, а также отдельный хук prop для отслеживания изменений конкретного свойства.

static get props() {
  return {
    count: Number
  };
}

prop({ count: { attribute: true } }) {
  console.log('Свойство count изменилось');
}

Особенности:

  • Свойства автоматически синхронизируются с атрибутами, если включена опция attribute: true.
  • Изменение свойства триггерит ререндеринг компонента, если используется метод render.
  • Хук prop позволяет реагировать только на конкретное изменение свойства, а не на все изменения компонента.

render

Хук render отвечает за генерацию HTML-структуры компонента. SkateJS поддерживает использование шаблонных строк и JSX-подобного синтаксиса через интеграцию с preact или lit-html.

render() {
  return `<div>Счет: ${this.count}</div>`;
}

Особенности рендеринга:

  • SkateJS использует реактивность свойств для автоматического вызова render.
  • Хук render вызывается не только при изменении свойства, но и при ручном вызове this.update().
  • Возвращаемое значение может быть как строкой HTML, так и функцией рендера для интеграции с virtual DOM.

attributeChanged

Для прямого взаимодействия с атрибутами DOM используется хук attributeChanged. Он вызывается при изменении атрибута, указанного в observedAttributes.

static get observedAttributes() {
  return ['data-status'];
}

attributeChanged(name, oldValue, newValue) {
  console.log(`${name} изменен с ${oldValue} на ${newValue}`);
}

Особенности:

  • Хук срабатывает только для наблюдаемых атрибутов.
  • Позволяет синхронизировать DOM-атрибуты с внутренними свойствами компонента.
  • Можно использовать для валидации или преобразования значения атрибута перед применением.

error

Хук error обеспечивает централизованную обработку исключений внутри компонента.

error(err) {
  console.error('Ошибка в компоненте:', err);
}

Особенности:

  • Позволяет перехватывать ошибки во время рендера или в других хуках.
  • Удобен для логирования или отправки данных об ошибке на сервер.
  • Можно использовать для восстановления состояния компонента после ошибки.

update

Хук update вызывается перед ререндерингом компонента при изменении свойств или атрибутов. Его задача — подготовить состояние перед визуальным обновлением.

update({ oldProps, newProps }) {
  if (oldProps.count !== newProps.count) {
    console.log('Счет обновился');
  }
}

Особенности:

  • Получает объект с oldProps и newProps для сравнения.
  • Может использоваться для оптимизации рендеринга, предотвращая лишние обновления.
  • В сочетании с shouldUpdate позволяет полностью контролировать процесс перерисовки.

Взаимодействие хуков

Встроенные хуки SkateJS работают синхронно и последовательно:

  1. connected — элемент добавлен в DOM.
  2. update — подготовка к ререндерингу.
  3. render — генерация нового DOM.
  4. prop / attributeChanged — обработка изменения свойств и атрибутов.
  5. disconnected — элемент удален из DOM.
  6. error — отлов исключений, возникших на любом этапе.

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

Рекомендации по использованию

  • Использовать connected для инициализации, а disconnected для очистки ресурсов.
  • Применять prop и attributeChanged для реактивного взаимодействия с внешними данными.
  • Вызывать update перед сложными операциями обновления DOM, чтобы минимизировать лишние рендеры.
  • Обрабатывать ошибки через error, чтобы компоненты оставались стабильными при исключениях.
  • По возможности комбинировать хуки для достижения максимальной реактивности и предсказуемости поведения.

Эти встроенные хуки формируют основу архитектуры компонентов в SkateJS и позволяют создавать масштабируемые, поддерживаемые и реактивные веб-компоненты.

Оглавление