Какая фича JavaScript используется под капотом у MobX?

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

Под капотом MobX использует несколько ключевых возможностей JavaScript, но основной механизм — это автоматическое отслеживание зависимостей через систему observable, реализованную с использованием:

1. Геттеров и сеттеров (getters/setters)
2. Proxy API (в современных версиях)
3. Реактивной системы на основе декораторов или функций

Детальный механизм работы

1. Изначальная реализация через Object.defineProperty()

В ранних версиях MobX использовал геттеры и сеттеры для перехвата доступа к свойствам:

// Упрощенная концепция отслеживания
const observableObject = {};
let observer = null;

Object.defineProperty(observableObject, 'value', {
  get() {
    // Запоминаем, кто читает свойство
    if (observer) {
      trackDependency(observer, 'value');
    }
    return this._value;
  },
  set(newValue) {
    this._value = newValue;
    // Уведомляем всех наблюдателей
    notifyObservers('value');
  }
});

2. Современная реализация через Proxy API

Начиная с MobX 4/5, для отслеживания изменений в объектах используется Proxy API:

// Упрощенный пример реализации observable через Proxy
function createObservable(obj) {
  return new Proxy(obj, {
    get(target, property) {
      // Захватываем доступ к свойству
      reportObserved(property, currentObserver);
      return target[property];
    },
    set(target, property, value) {
      target[property] = value;
      // Уведомляем об изменении
      reportChanged(property);
      return true;
    }
  });
}

Ключевые компоненты системы MobX

1. Observable состояния

MobX автоматически преобразует данные в реактивные структуры:

• Примитивы, объекты, массивы становятся отслеживаемыми
• Изменения автоматически обнаруживаются

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

Когда computed значение или reaction выполняется, MobX запоминает, какие observable свойства были прочитаны:

import { observable, computed, autorun } from 'mobx';

class Store {
  @observable price = 10;
  @observable quantity = 2;
  
  @computed get total() {
    // MobX автоматически отслеживает, что эта функция
    // читает price и quantity
    return this.price * this.quantity;
  }
}

// Autorun автоматически перезапускается при изменении зависимостей
autorun(() => {
  console.log(`Total: ${store.total}`);
});

3. Реактивная система

MobX использует паттерн Наблюдатель (Observer) в сочетании с:

• Графом зависимостей для оптимального обновления
• Пакетными обновлениями для предотвращения лишних перерисовок
• Атомарность изменений через транзакции

Почему это эффективно?

Преимущества подхода MobX:

• Минимальный оверхед — отслеживаются только фактически используемые зависимости
• Автоматическая оптимизация — исключает лишние пересчеты
• Прозрачность — разработчик работает с обычными JavaScript объектами
• Производительность — обновляется только то, что действительно изменилось

Сравнение с другими подходами:

// MobX (автоматическое отслеживание)
@computed get fullName() {
  return `${this.firstName} ${this.lastName}`;
}

// Ручное управление (как в Redux)
// Требует явной подписки и сравнения предыдущего состояния

Технические детали реализации

MobX использует глобальный стек контекста для отслеживания текущего наблюдателя:

// Псевдокод внутренней работы
const derivationStack = [];

function startTracking(derivation) {
  derivationStack.push(derivation);
}

function track(observable) {
  const currentDerivation = derivationStack[derivationStack.length - 1];
  if (currentDerivation) {
    // Связываем observable с текущим derivation
    linkDependency(currentDerivation, observable);
  }
}

Итоговый ответ: MobX использует комбинацию Proxy API (или Object.defineProperty) и системы автоматического отслеживания зависимостей для создания реактивной системы. При чтении observable свойств внутри computed функций или реакций, MobX запоминает эти зависимости и автоматически перезапускает соответствующие вычисления при изменении отслеживаемых значений. Это позволяет достичь магической реактивности, когда UI автоматически синхронизируется с состоянием приложения без явных подписок и отписок.