reactive
Метод reactive создает глубоко реактивный объект (Proxy) на основе предоставленного целевого объекта или массива. В отличие от атомарных сигналов (signal), которые требуют доступа через .value, метод reactive позволяет работать с сложными вложенными структурами данных нативно, используя стандартный синтаксис JavaScript для чтения и прямой мутации свойств.
Архитектурные особенности
- Гранулярность подписок (Property-level Subscriptions): Зависимости графа ядра трекаются не для всего объекта целиком, а строго для конкретных ключей (
prop). Если эффект или компонент читает свойствоuser.name, он подписывается исключительно на этот ключ. Изменение свойстваuser.ageне вызовет его повторного выполнения. - Глубокое проксирование (Deep Reactivity): При обращении к вложенным объектам или массивам, метод динамически и лениво оборачивает их в Proxy-структуры, автоматически формируя понятные строковые пути для подсистемы логирования (например,
user.meta.role). - Иммунизация кэша (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
}));