Как во фреймворке определить наличие реактивности?

Как определить наличие реактивности во фреймворке

Что такое реактивность

Реактивность - это способность фреймворка автоматически отслеживать изменения в данных и пересчитывать DOM когда эти данные изменяются. Это основная фишка современных фреймворков.

Ключевые признаки реактивности

1. Автоматическое обновление при изменении состояния

// React - реактивный
function Counter() {
  const [count, setCount] = useState(0);
  
  // При вызове setCount(1) компонент АВТОМАТИЧЕСКИ перерендерится
  return <p>{count}</p>; // это будет обновлено в DOM
}

// Vanilla JS - НЕ реактивный
let count = 0;
const p = document.querySelector('p');
p.textContent = count; // нужно вручную обновлять

count = 1;
// DOM не обновился! Нужно вручную:
p.textContent = count;

2. Двусторонняя привязка (two-way binding)

Это признак реактивности в фреймворках наподобие Vue, Angular:

<!-- Vue - реактивно -->
<input v-model="message" />
<p>{{ message }}</p>
<!-- Когда пользователь меняет input, message обновляется автоматически -->
<!-- И наоборот: когда message меняется в коде, input обновляется -->

// React - требует явной привязки (не полностью реактивен)
<input 
  value={message} 
  onChange={(e) => setMessage(e.target.value)} 
/>
<p>{message}</p>
// Нужно явно задать onChange обработчик

Различия в реактивности между фреймворками

React - контролируемые компоненты

// Нужно явно управлять состоянием
function Form() {
  const [name, setName] = useState('');
  
  return (
    <input 
      value={name} 
      onChange={(e) => setName(e.target.value)}
    />
  );
}

Реактивность: автоматически перерисовывает при setName Управление: ручное - пишу onChange обработчик

Vue - реактивные объекты

// Vue автоматически отслеживает изменения
export default {
  data() {
    return {
      name: '' // просто объявляю переменную
    };
  },
  template: `
    <input v-model="name" />
    {{ name }}
  `
  // Vue отслеживает изменения и обновляет автоматически
};

Реактивность: встроена в язык, отслеживается автоматически Управление: минимальное - Vue сам всё делает

Angular - RxJS Observables

// Angular использует реактивный подход через Observable
component.counter$ = new BehaviorSubject(0);

// Автоматическое обновление при эмите нового значения
this.counter$.next(1);

// В template используется async pipe для автоматического подписания
<p>{{ counter$ | async }}</p>

Реактивность: через Observable - значение меняется, все подписчики уведомляются Управление: декларативное - описываю потоки данных

Как проверить реактивность

Тест 1: Изменение состояния приводит к перерисовке

// React
function App() {
  const [count, setCount] = useState(0);
  
  console.log('Рендер'); // печатается каждый раз
  
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </>
  );
}

// При клике кнопки:
// 1. setCount вызывается
// 2. Логируется "Рендер"
// 3. count обновляется в DOM
// Вывод: реактивно!

Тест 2: Проверка detectChanges/markForCheck

// Angular требует явного обновления в некоторых случаях
component.count = 5; // значение изменилось
this.changeDetection.markForCheck(); // нужно явно сказать, что изменилось

// Вывод: Angular менее реактивен, требует явного управления

Тест 3: Проверка getters/setters

// Vue 3 использует Proxy для отслеживания
const user = reactive({ name: 'John' });
user.name = 'Jane'; // Vue понимает, что произошло изменение

// React этого не делает - нужно setState
const [user, setUser] = useState({ name: 'John' });
user.name = 'Jane'; // React НЕ заметит!
setUser({ ...user, name: 'Jane' }); // нужно явно

Проверка реактивности в браузере

1. Vue DevTools

// Если установлено Vue DevTools
// Можно видеть все реактивные данные
// и как они обновляются в реальном времени

// Способ проверки:
// 1. Открыть Vue DevTools
// 2. Перейти на вкладку "Components"
// 3. Выбрать компонент
// 4. Увидеть все реактивные свойства (выделены зелёным)

2. React DevTools

// React DevTools показывает props и state
// Можно видеть какие значения изменились
// (выделяются рамкой при обновлении)

// Способ проверки:
// 1. Открыть React DevTools
// 2. Выбрать компонент
// 3. Произвести действие
// 4. Увидеть какой state/props изменился

3. Консоль браузера

// Простой способ проверить реактивность

// React
function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('count изменился:', count);
  }, [count]);
  
  return <button onClick={() => setCount(c => c + 1)}>+</button>;
}
// При клике будет логирован новый count

// Vue
export default {
  data() {
    return { count: 0 };
  },
  watch: {
    count(newVal) {
      console.log('count изменился:', newVal);
    }
  }
};
// При изменении count сработает watch

Реактивность в разных контекстах

Реактивные формы (Reactive Forms)

// Angular - явно реактивные формы
this.form = this.fb.group({
  name: [''],
  email: ['']
});

// При изменении формы можно подписаться на изменения
this.form.get('name').valueChanges.subscribe(value => {
  console.log('Имя изменилось:', value);
});

Реактивные хуки

// React - нужны useEffect для "реактивности"
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []); // зависит от window - внешний источник
  
  return width;
}

// useEffect - это способ синхронизировать реактивное состояние
// с внешним миром

Как определить уровень реактивности

Полностью реактивные

• Vue: Proxy-based, двусторонняя привязка, минимум кода
• Svelte: компилятор автоматически отслеживает зависимости
• Solid.js: файнгрейневая реактивность

Частично реактивные

• React: реактивное состояние (useState), но требует явной привязки
• Angular: реактивные формы и Observables, но требует markForCheck

Не реактивные

• jQuery: полное ручное управление DOM
• Vanilla JS: нужно вручную обновлять всё

Практический чеклист

Чтобы определить есть ли реактивность:

• Изменяю состояние - автоматически обновляется DOM
• Не пишу код для обновления HTML
• Могу видеть отслеживание зависимостей (DevTools)
• Есть механизм отслеживания изменений (useState, ref, observable)
• Компонент перерисовывается когда нужно
• Нет необходимости вручную манипулировать DOM

Вывод

Реактивность определяется по:

1. Автоматическое обновление DOM при изменении данных
2. Отслеживание зависимостей (какие данные от чего зависят)
3. Механизм синхронизации (Proxy, useState, Observables)
4. Минимум ручного кода для управления обновлениями

Все современные фреймворки реактивны, но в разной степени. Vue - наиболее реактивна "из коробки", React требует больше явного управления, Angular требует больше всего осознанного управления.