Автоматическое отслеживание зависимостей

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

Observable Базовая инфраструктура для регистрации свойств, чьи изменения должны отражаться в шаблоне. Используется как фундамент для @observable и FASTElement.

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

Reactive Update Queue Очередь планирования обновлений, предотвращающая избыточный рендеринг. Изменения состояния агрегируются и применяются группой на следующем цикле.

Принцип работы

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

FAST минимизирует перерисовку, обновляя только те узлы, которые связаны с модифицированными свойствами. Например, изменение одного поля формы не вызывает полной регенерации компонента.

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

FAST предоставляет декоратор @observable, регистрирующий геттер и сеттер. Сеттер вызывает Observable.notify, а чтение внутри привязки активирует Observable.track.

import { observable } from '@microsoft/fast-element';

class Counter {
  @observable value = 0;
}

При использовании такого свойства в шаблоне FAST автоматически фиксирует связь:

html<Counter>`<span>${x => x.value}</span>`;

Изменение value вызывает обновление соответствующего фрагмента DOM.

Реактивные функции с Observable.track

Для сложных вычислений возможно вручную задать реактивное отслеживание:

import { Observable } from '@microsoft/fast-element';

function computed(fn) {
  let value;
  const update = () => value = fn();
  Observable.track(update);
  return () => value;
}

При вызове fn в процессе track фиксируются все наблюдаемые свойства, к которым происходит обращение. При их изменении вызывается обновление value.

Гранулярность обновления

FAST обновляет только участок DOM, привязанный к изменённому свойству. Эта гранулярность достигается за счёт того, что каждая привязка отслеживает свой набор зависимостей. В отличие от фреймворков с виртуальным DOM, FAST исключает сравнение деревьев и работает точечно.

Ключевые преимущества:

  • отсутствие виртуального DOM;
  • минимальная стоимость привязки;
  • автоматическая подписка и отписка;
  • отсутствие ручной синхронизации.

Очередь обновлений

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

obj.value = 1;
obj.value = 2;
// Изменение отображается один раз.

Такой подход снижает накладные расходы при массовом обновлении данных.

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

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

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

Управление жизненным циклом зависимостей

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

Влияние на проектирование компонентов

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

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

Использование с наследованием FASTElement

Компоненты на базе FASTElement наследуют встроенную поддержку наблюдаемых свойств. При объявлении свойства в классе оно автоматически регистрируется в реактивной системе:

import { FASTElement, attr, observable } from '@microsoft/fast-element';

class CounterElement extends FASTElement {
  @observable count = 0;
  @attr disabled = false;
}

@attr синхронизирует значение с HTML-атрибутами, а @observable активирует отслеживание. Оба механизма совместно участвуют в реактивной модели.

Тонкости использования

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

Отсутствие магии Отслеживание запускается только во время чтения свойства внутри привязки или track. Чтение свойства в других контекстах не создаёт подписок.

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

Итоговое поведение системы

Механизм автоматического отслеживания зависимостей обеспечивает эффективное соответствие состояния и DOM без явных подписок, ручного управления рендерингом и тяжёлых алгоритмов сверки. Реактивность остаётся прозрачной, минималистичной и производительной для сценариев от простых виджетов до сложных пользовательских интерфейсов.

Оглавление