Что такое React? Зачем нужен?

🎯 Зачем спрашивают

Проверить, понимает ли кандидат базовую философию React (декларативность, компоненты, Virtual DOM).

Может ли объяснить на причины появления React.

📝 Ответ

React — это JavaScript-библиотека для создания пользовательских интерфейсов.

React абстрагирует работу с DOM и оптимизирует обновления через Virtual DOM и diffing. Это не всегда быстрее ручного DOM, но даёт предсказуемую модель и снижает когнитивную нагрузку. А так же помогает строить сложные интерфейсы из маленьких, переиспользуемых компонентов.

💡

React не изобрел компонентный подход

Идея компонентного подхода в разработке появилась задолго до React. React лишь популяризовал и упростил её в веб-разработке.

В 2000-е — в вебе появились Web Components (стандарты W3C: Custom Elements, Shadow DOM, Templates). Первые черновики появились ещё до React.

Также фреймворки типа AngularJS (2010), Backbone.js, Ember.js уже оперировали концепцией "виджетов" или "views", которые тоже можно считать компонентами.

Без React:

Ты вручную работаешь с DOM (document.createElement, appendChild, innerHTML).

Сложно поддерживать связанный UI, когда состояние меняется.

Код быстро превращается в "спагетти", особенно при взаимодействии элементов.

С React:

Ты описываешь, как должен выглядеть UI в зависимости от состояния (state).

React сам обновляет DOM, когда данные меняются.


function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Какие проблемы решает React?

1. Сложность ручной работы с DOM

Вместо того чтобы писать document.querySelector и управлять состоянием вручную — ты просто обновляешь state, а React всё сделает сам.

2. Сложность синхронизации UI и данных

У тебя есть данные (count = 5), и ты хочешь показать их на экране. В обычном JS — нужно следить за изменениями и обновлять DOM вручную. В React — ты просто ререндеришь компонент, и он сам покажет актуальные данные.

3. Проблемы с производительностью при рендерах

React использует Virtual DOM для оптимизации обновлений: он пересчитывает изменения и обновляет только нужные части. Это снижает накладные расходы при сложных интерфейсах, но не гарантирует абсолютного выигрыша над ручным DOM в каждом кейсе.

4. Повторное использование логики и UI

React предлагает компоненты — как Lego-кубики. Один компонент — один смысл, один блок интерфейса. Их можно вкладывать, переиспользовать, тестировать отдельно.

Как в React работает оптимизация рендеринга?

За счет Virtual DOM. React не лезет в DOM напрямую при каждом setState.

Вместо этого он:

Хранит "копию" DOM в памяти — Virtual DOM.

Когда ты меняешь состояние, он:

Сравнивает старый VDOM и новый (diffing)

Вычисляет минимальный набор изменений

Обновляет только изменившиеся части реального DOM

⚖️ Компромиссы

✅ Плюсы	❌ Минусы
Декларативность	Размер итогового бандла
Обширная экосистема	Кривая обучения (hooks, ререндеры)
Активное и большое сообщество, поддержка Facebook	Если перфоманс для вашего приложения критичен, то есть более подходящие технологии (Svelte, VanillaJS, Preact)
Много вакансий на данный стек	ㅤ

🔎 Встречные вопросы

Какие проблемы решает React?

Почему работать с DOM напрямую — накладно по производительности?

Как в react работает оптимизация рендеринга?

Были же JQuery, Backbone, например, зачем тогда нужен react?

🚩 Красные флаги

React — это фреймворк

React — это фреймворк или библиотека для создания пользовательских интерфейсов (и все)

React нужен для JSX

🛠 Практика

Задача 1

Реализуй счётчик на чистом JS (DOM API) и на React. Сравни объём и читаемость кода.

Задача 2

Сделай список из 100 элементов, добавь возможность удалять/добавлять. Сравни подходы JS vs React

📚 Источники / ссылки