Введение в Reactive Engine

@pravosleva/reactive-engine — это сверхлегкое, ультрапроизводительное логическое ядро и стейт-менеджер для современных приложений. Архитектура движка построена на концепции сигналов (Signals) и направлена на обеспечение предсказуемого потока данных с микрооптимизацией процесса рендеринга.

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

---

Key Features (Ключевые особенности)

• Мгновенные атомарные обновления: Компоненты подписываются не на абстрактный «объект состояния», а строго на конкретные примитивные сигналы (Signal) или вычисляемые свойства (Computed). Изменение значения обновляет только те элементы интерфейса, которые его выводят на экран.
• Вычисления за $O(1)$: Производные состояния (Computed) ленивы по своей природе. Они кешируют результат и не запускают пересчет, пока не изменятся исходные сигналы, от которых они зависят.
• Автоматический Batching (Пакетная обработка): Множественные синхронные изменения состояний автоматически объединяются в одну микрозадачу. Тяжелые эффекты и сетевые запросы не будут перезапускаться циклично, если вы обновили 10 сигналов в рамках одного обработчика событий.
• Умный контроль асинхронности: Встроенный инструмент resource берет на себя оркестрацию AbortController. При изменении зависимостей движок автоматически отменяет предыдущие зависшие сетевые запросы, предотвращая состояние гонки (race conditions).

---

Архитектурные кирпичики

Движок оперирует тремя базовыми сущностями:

1. Signal<T> — минимальная неделимая ячейка реактивного состояния (источник правды).
2. Computed<T> — ленивое вычисляемое значение, производное от других сигналов.
3. Resource<T> — реактивная обертка над асинхронными операциями (запросы к API, лонг-поллинг).

---

Быстрый старт с React

Бизнес-логика оформляется в виде независимых сервисов (классов), которые затем подключаются к React-компонентам через специализированные хуки.

1. Определение логики (Сервис)

import { Signal, Computed } from '@pravosleva/reactive-engine';

export class CounterService {
  // Атомарное состояние
  public readonly count = new Signal<number>(0);

  // Вычисляемое состояние (автоматически кешируется)
  public readonly doubleCount = new Computed<number>(() => {
    return this.count.value * 2;
  });

  public increment = (): void => {
    this.count.value += 1;
  };

  public decrement = (): void => {
    this.count.value -= 1;
  };
}

export const counterLogic = new CounterService();

2. Интеграция с UI (React-компонент)

Для подписки на реактивные изменения используется хук useReactiveValue. Он извлекает чистое значение и подписывает компонент на обновления.

import React from 'react';
import { useReactiveValue } from '@pravosleva/reactive-engine';
import { counterLogic } from './CounterService';

export const CounterOption: React.FC = () => {
  // Компонент перерендерится ТОЛЬКО при изменении count или doubleCount
  const count = useReactiveValue(counterLogic.count);
  const doubleCount = useReactiveValue(counterLogic.doubleCount);

  return (
    <div style={{ padding: '16px', border: '1px solid #ccc' }}>
      <h2>Счетчик: {count}</h2>
      <h3>Удвоенное значение: {doubleCount}</h3>

      <button onClick={counterLogic.increment}>+</button>
      <button onClick={counterLogic.decrement}>-</button>
    </div>
  );
};

---

Что изучать дальше?

Переходите к разделу документации, чтобы детальнее изучить возможности движка:

• Изучите работу с декларативным получением данных в документации ресурсов.
• Посмотрите, как оптимизировать частые вызовы событий с помощью дебаунса в @withDebounce.