Чем React отличается от ванильного JavaScript?

Основное различие

Ванильный JavaScript — это язык программирования, который работает напрямую с DOM (Document Object Model). Вы сами находите элементы, изменяете их содержимое, добавляете обработчики событий и управляете состоянием приложения вручную. React — это библиотека, построенная на JavaScript, которая предлагает другой подход: вы описываете, как интерфейс должен выглядеть в зависимости от данных, а React сам заботится об обновлении DOM.

Компонентный подход

В React интерфейс разбивается на переиспользуемые компоненты. Каждый компонент — это функция или класс, который возвращает JSX (расширение JavaScript, похожее на HTML). Это позволяет изолировать логику и стили, упрощая тестирование и поддержку кода. В ванильном JavaScript вы часто пишете длинные скрипты, которые смешивают разметку и логику.

Виртуальный DOM

React использует виртуальный DOM — легковесную копию реального DOM. Когда состояние компонента меняется, React создаёт новый виртуальный DOM, сравнивает его с предыдущим и вычисляет минимальные изменения. Затем он применяет эти изменения к реальному DOM. Это значительно быстрее, чем перерисовывать всю страницу, как часто приходится делать в ванильном JavaScript.

Пример кода

Сравним простой счётчик. На ванильном JavaScript:

let count = 0;
const button = document.getElementById('btn');
const display = document.getElementById('count');
button.addEventListener('click', () => {
  count++;
  display.textContent = count;
});

В React:

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

В React вы не трогаете DOM напрямую — вы меняете состояние, и интерфейс обновляется автоматически.

Когда что использовать

Ванильный JavaScript подходит для простых страниц или небольших виджетов, где не требуется сложное состояние. React оправдан для крупных приложений с множеством взаимодействий, где важна переиспользуемость компонентов и предсказуемость обновлений.

Итог: React — это инструмент, который абстрагирует ручную работу с DOM и помогает структурировать код. Если вы создаёте масштабируемое приложение с динамическим интерфейсом, React сэкономит время и уменьшит количество ошибок.