Skip to content

reactive ​

Метод reactive создает глубоко реактивный объект (Proxy) на основе предоставленного целевого объекта или массива. В отличие от атомарных сигналов (signal), которые требуют доступа через .value, метод reactive позволяет работать с сложными вложенными структурами данных нативно, используя стандартный синтаксис JavaScript для чтения и прямой мутации свойств.

Архитектурные особенности ​

  1. Гранулярность подписок (Property-level Subscriptions): Зависимости графа ядра трекаются не для всего объекта целиком, а строго для конкретных ключей (prop). Если эффект или компонент читает свойство user.name, он подписывается исключительно на этот ключ. Изменение свойства user.age не вызовет его повторного выполнения.
  2. Глубокое проксирование (Deep Reactivity): При обращении к вложенным объектам или массивам, метод динамически и лениво оборачивает их в Proxy-структуры, автоматически формируя понятные строковые пути для подсистемы логирования (например, user.meta.role).
  3. Иммунизация кэша (Proxy Mirroring Cache): Все созданные Proxy зеркалируются во внутреннем реестре proxyCache. Повторный вызов метода для одного и того же объекта вернет уже существующий Proxy, предотвращая утечки памяти и дублирование подписок.

Применение в оптимизации больших форм ​

Идеально подходит для тяжелых интерфейсов (динамические таблицы, анкеты из сотен полей), так как прямая мутация конкретного инпута изолирует поток изменений и избавляет от необходимости иммутабельного копирования всего стейта формы через оператор расширения (...spread).

Параметры ​

  • target: Исходный объект или массив JavaScript для проксирования.
  • name (необязательно): Уникальное базовое имя объекта для трассировки и фильтрации в логгере.

Возвращает ​

Глубоко проксированный реактивный объект типа T.

Пример ​

typescript
// 1. Инициализация в сервисе бизнес-логики:
public form = this.engine.reactive({
  user: { name: 'Иван', age: 25 }
}, 'profile-form');

// 2. Прямая мутация в экшене (Proxy перехватит тик и запустит атомарный батчинг):
public updateAge() {
  this.form.user.age += 1; // Автоматический лог: SIGNAL [profile-form.user.age]
}

// 3. Мост подписки для UI-компонентов:
public uiBridge = this.engine.computed(() => ({
  name: this.form.user.name,
  age: this.form.user.age
}));