Реактивные вычисления

Реактивная модель в FAST Element связывает состояние компонента и его представление таким образом, чтобы изменения данных автоматически отражались в DOM. Основой служит система Observable, позволяющая отслеживать поля и выражения и инициировать обновления привязок.

Наблюдаемые свойства

Любое свойство, объявленное через декоратор @observable, становится наблюдаемым. FAST создает внутреннюю инфраструктуру нотификаций, используя слабые карты и минимальные подписки, чтобы не перегружать рендеринг. При изменении значения свойства запускается дифференцированное обновление привязанного участка шаблона.

Ключевые моменты

  • Наблюдаемые свойства не требуют ручного вызова сеттеров.
  • События изменения оптимизированы за счет батчинга обновлений.
  • Отсутствуют лишние перерендеры всего компонента; обновляется только связанный узел.

Вычисляемые значения

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

Особенности

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

Выражения в шаблонах

FAST-шаблоны используют функции или лямбда-выражения, что создает естественную модель вычислений. При создании компонента FAST компилирует шаблон в набор инструкций обновления. Каждое динамическое выражение формирует минимальный реактивный узел, который подписывается на наблюдаемые свойства.

Пример

В шаблоне:

<span>${x => x.count * 2}</span>

выражение x.count * 2 становится реактивным узлом. Изменение count ведет к пересчету значения и обновлению текстового содержимого span.

Связывание и наблюдение

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

Преимущества модели

  • Минимизация объема обновлений.
  • Отсутствие ручного управления зависимостями.
  • Высокая предсказуемость и детерминизм.

Расширенные сценарии

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

Производные коллекции

При работе с массивами FAST использует реактивные подписки на методы изменения коллекций, такие как push, splice или пользовательские операции через ObservableArray. При изменении коллекции выполняется выборочное обновление только тех частей DOM, которые отображают эти элементы.

Реактивные стили и атрибуты

Привязки в стилях и атрибутах используют тот же механизм выражений. Когда зависимость изменяется, FAST локально обновляет значение атрибута или CSS-свойства без перерендера всего узла.

Контекст исполнения вычислений

Исполнение реактивных вычислений зависит от контекста компонента. При создании компонента возникает граф вычислений: вершинами выступают выражения, а ребрами — зависимости. Пересчет происходит строго вверх по графу, что исключает циклы и обеспечивает топологический порядок обновлений.

Локальность вычислений

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

Интероперабельность с другими реактивными системами

FAST Element допускает интеграцию с внешними реактивными библиотеками через адаптацию их подписочных моделей. Можно использовать Observable.notify и низкоуровневые API для проброса обновлений в реактивный граф FAST. Это позволяет включать вычисления из сторонних сто́рон в привязки шаблона без потерь производительности.

Планировщик обновлений

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

Оптимизации

FAST применяет ряд оптимизаций для реактивности:

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

Практический эффект

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

Реактивные вычисления и жизненный цикл

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

Диагностика и отладка

Для анализа реактивных вычислений доступен низкоуровневый API Observable.getSubscribers. С его помощью можно определить зависимости выражений и найти узкие места в обновлениях. Отладка упрощается из-за детерминированного порядка пересчета и локальных графов.

Завершение

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

Оглавление