Подписка на изменения в SkateJS обеспечивает реактивное обновление интерфейса при изменении состояния компонента. Механизм реализован через связывание данных и событий жизненного цикла, что позволяет синхронно обновлять DOM без ручного отслеживания зависимостей.
Состояние компонента в SkateJS хранится в наблюдаемой структуре. Любое изменение свойства инициирует процесс повторного рендера. В отличие от императивных подходов, перерисовка инициируется автоматически, а не в результате явного вызова обновления.
Ключевой момент: SkateJS не сохраняет историю изменений состояния. Каждая подписка реагирует только на текущее значение и его обновление.
Подписка охватывает:
Подписка не распространяется на произвольные объекты, не зарегистрированные в компоненте.
SkateJS использует собственную систему наблюдения свойств. При объявлении свойства в компоненте автоматически формируется реактивный дескриптор, который уведомляет рендер при обновлении.
Пример объявления свойства:
static props = {
count: Number
};После объявления свойства SkateJS отслеживает присвоения:
this.count++;Обновление инициирует рендер без дополнительных вызовов.
Изменения атрибутов отражаются в состоянии компонента благодаря автоматическому связыванию. Типизация свойств определяет способ преобразования значения атрибута в значение свойства. Поведение обратное: изменение свойства отражается в DOM.
Особенность подписки на атрибуты заключается в том, что браузерные события изменения атрибутов обрабатываются SkateJS без участия пользователя, гарантируя синхронность состояния и структуры DOM.
SkateJS стремится минимизировать перерисовку. При подписке только затронутые узлы DOM подвергаются обновлению, что снижает нагрузку на браузерный движок. Механизм диффинга сравнивает текущее и новое представление интерфейса и обновляет минимальный набор элементов.
Подписки могут работать с внешними потоками данных: WebSocket, EventSource, состояние хранилища или асинхронные запросы. В таких случаях SkateJS рассматривает обновление данных как изменение свойства и повторно рендерит компонент.
Пример интеграции внешнего события:
socket.on('update', data => {
this.count = data.value;
});Внешний источник не нужен для конфигурации подписки, так как SkateJS реагирует на присвоение.
При удалении компонента из DOM автоматически прекращается отслеживание изменений его состояния. Это предотвращает утечки памяти, характерные для систем с ручными подписками.
Подписка распространяется на все уровни наследования компонента. Базовые свойства остаются реактивными в производных классах, что способствует повторному использованию логики без повторного объявления механизма подписки.
Механизм подписок обеспечивает согласованность интерфейса и данных. Устранение ручной синхронизации уменьшает вероятность ошибок и упрощает архитектуру компонентов, особенно при большом числе взаимосвязанных состояний.