Что такое Virtual DOM?

Virtual DOM — это легковесное представление реального DOM в виде JavaScript-объектов, которое React хранит в памяти и синхронизирует с настоящим DOM.

Зачем он нужен

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

• при изменении состояния строится новое виртуальное дерево;
• новое дерево сравнивается со старым (процесс reconciliation, алгоритм диффа);
• вычисляется минимальный набор изменений;
• только эти изменения применяются к реальному DOM одним пакетом.

Как выглядит Virtual DOM

Каждый элемент — обычный объект:

const element = {
  type: 'button',
  props: {
    className: 'primary',
    children: 'Купить',
  },
};

JSX <button className="primary">Купить</button> компилируется в вызов, создающий именно такой объект.

Как работает дифф

• Элементы разных типов (div → span) — старое поддерево удаляется, новое строится с нуля.
• Элементы одного типа — обновляются только изменившиеся атрибуты.
• Списки сравниваются по key — так React понимает, какой элемент переместился, а какой добавился.

Нюансы

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

Коротко для собеседования

Virtual DOM — JS-копия DOM в памяти. При изменении состояния React строит новое дерево, сравнивает со старым и применяет к реальному DOM только минимальный набор изменений. Это делает обновления предсказуемыми и позволяет писать декларативный код без ручной работы с DOM.