Как средствами JavaScript реализовать реактивность?

Реализация реактивности в JavaScript

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

Основные концепции реактивности

Реактивность основана на трех ключевых принципах:

• Отслеживание зависимостей (Dependency Tracking) — система запоминает, какие части кода зависят от каких данных
• Распространение изменений (Change Propagation) — при изменении данных автоматически обновляются все зависимые элементы
• Автоматическое обновление (Automatic Update) — минимизация ручного управления состоянием

Основные подходы реализации

1. Геттеры/Сеттеры (Object.defineProperty)

Классический подход, используемый в ранних версиях Vue.js:

class ReactiveObject {
  constructor(data) {
    this._data = data;
    this._dependencies = new Map();
    
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        get() {
          // Запоминаем зависимость
          if (ReactiveObject.currentWatcher) {
            if (!this._dependencies.has(key)) {
              this._dependencies.set(key, new Set());
            }
            this._dependencies.get(key).add(ReactiveObject.currentWatcher);
          }
          return this._data[key];
        },
        set(newValue) {
          this._data[key] = newValue;
          // Уведомляем всех подписчиков
          if (this._dependencies.has(key)) {
            this._dependencies.get(key).forEach(watcher => watcher.update());
          }
        }
      });
    });
  }
}

ReactiveObject.currentWatcher = null;

class Watcher {
  constructor(updateFn) {
    this.update = updateFn;
  }
  
  run() {
    ReactiveObject.currentWatcher = this;
    this.update();
    ReactiveObject.currentWatcher = null;
  }
}

2. Proxy API (Современный подход)

ES6 Proxy предоставляет более мощный и гибкий механизм:

function createReactive(data, onChange) {
  return new Proxy(data, {
    get(target, property) {
      // Можно добавить отслеживание зависимостей
      return Reflect.get(target, property);
    },
    set(target, property, value) {
      const oldValue = target[property];
      const result = Reflect.set(target, property, value);
      
      if (oldValue !== value) {
        onChange(property, value, oldValue);
      }
      
      return result;
    },
    deleteProperty(target, property) {
      const result = Reflect.deleteProperty(target, property);
      onChange('delete', property);
      return result;
    }
  });
}

// Использование
const state = createReactive(
  { count: 0, items: [] },
  (property, newValue, oldValue) => {
    console.log(`Изменено: ${property}, было: ${oldValue}, стало: ${newValue}`);
  }
);

3. Система реактивности с зависимостями

Более сложная реализация с полноценным отслеживанием зависимостей:

class DependencyTracker {
  constructor() {
    this.subscribers = new Set();
  }
  
  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
    }
  }
  
  notify() {
    this.subscribers.forEach(effect => effect());
  }
}

let activeEffect = null;

function watchEffect(effect) {
  activeEffect = effect;
  effect();
  activeEffect = null;
}

function reactive(obj) {
  const dependencies = new Map();
  
  return new Proxy(obj, {
    get(target, key) {
      if (!dependencies.has(key)) {
        dependencies.set(key, new DependencyTracker());
      }
      dependencies.get(key).depend();
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      if (dependencies.has(key)) {
        dependencies.get(key).notify();
      }
      return true;
    }
  });
}

4. Практический пример реализации мини-Vue

class MiniVueReactive {
  constructor(options) {
    this._data = options.data();
    this._computed = options.computed || {};
    this._watchers = new Map();
    
    this._makeReactive(this._data);
    this._setupComputed();
  }
  
  _makeReactive(obj) {
    Object.keys(obj).forEach(key => {
      let value = obj[key];
      const dep = new Set();
      
      Object.defineProperty(obj, key, {
        get: () => {
          if (this._currentWatcher) {
            dep.add(this._currentWatcher);
          }
          return value;
        },
        set: newValue => {
          if (value !== newValue) {
            value = newValue;
            dep.forEach(watcher => watcher());
          }
        }
      });
    });
  }
  
  _setupComputed() {
    Object.keys(this._computed).forEach(key => {
      this._currentWatcher = () => {
        this._data[key] = this._computed[key].call(this._data);
      };
      this._currentWatcher();
      this._currentWatcher = null;
    });
  }
  
  watch(property, callback) {
    this._currentWatcher = callback;
    // Активируем getter для отслеживания зависимостей
    this._data[property];
    this._currentWatcher = null;
  }
}

Сравнение подходов

Лучшие практики

1. Используйте Proxy для современных приложений — это наиболее мощный и гибкий подход
2. Реализуйте cleanup для подписок — предотвращайте утечки памяти
3. Оптимизируйте обновления — используйте debounce или throttle для частых изменений
4. Разделяйте реактивное и нереактивное состояние — не всё должно быть реактивным
5. Используйте вложенную реактивность с осторожностью — глубокое отслеживание может быть дорогим

Пример оптимизированной реактивности

class OptimizedReactive {
  constructor() {
    this.state = {};
    this.effects = new Map();
    this.scheduled = false;
    this.pendingEffects = new Set();
  }
  
  setState(newState) {
    Object.assign(this.state, newState);
    this.scheduleUpdate();
  }
  
  scheduleUpdate() {
    if (!this.scheduled) {
      this.scheduled = true;
      requestAnimationFrame(() => {
        this.pendingEffects.forEach(effect => effect());
        this.pendingEffects.clear();
        this.scheduled = false;
      });
    }
  }
  
  createEffect(fn) {
    const effect = () => fn(this.state);
    // Запускаем эффект и определяем зависимости
    // Упрощённо - в реальности нужно отслеживать геттеры
    effect();
    this.pendingEffects.add(effect);
    return () => this.pendingEffects.delete(effect);
  }
}

Реактивность в JavaScript эволюционировала от простых геттеров/сеттеров к сложным системам на основе Proxy API. Ключевой момент — эффективное отслеживание зависимостей и оптимизация обновлений. В production-приложениях рекомендуется использовать проверенные библиотеки (Vue 3, MobX, Solid.js), но понимание внутренних механизмов необходимо для решения сложных задач и оптимизации производительности.