Какие знаешь принципы реактивности

«Какие знаешь принципы реактивности» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Реактивность — это автоматическое обновление UI при изменении данных. Основные принципы:

  1. Однонаправленный поток данных
    Данные всегда передаются сверху вниз (parent → child). Дочерние компоненты получают данные через props.

  2. Иммутабельность
    Данные не изменяются напрямую, а создаются новые версии (особенно важно для стейт-менеджеров).

  3. Зависимости и отслеживание
    Фреймворки автоматически отслеживают зависимости (какие компоненты используют какие данные).

Пример реактивности во Vue:

data() {
  return { count: 0 }
},
methods: {
  increment() {
    this.count++ // UI автоматически обновится
  }
}

В React это достигается через хуки:

const [count, setCount] = useState(0);
const increment = () => setCount(prev => prev + 1);

Ключевое — декларативный подход: описываем что должно отобразиться, а не как это обновлять.