В чем разница между обычным и Virtual DOM?

Реальный DOM — это живое дерево объектов браузера, отражающее страницу. Virtual DOM — его облегчённая JS-копия, которую React держит в памяти для вычисления изменений.

Реальный (обычный) DOM

• Каждый узел — тяжёлый браузерный объект с сотнями свойств и привязкой к рендерингу.
• Изменения могут вызывать каскад работ браузера: пересчёт стилей, layout (reflow), перерисовку.
• Частые точечные манипуляции (особенно чтение layout вперемешку с записью) — классический источник тормозов.

Virtual DOM

• Обычные JS-объекты { type, props, children } — создавать и сравнивать их дёшево.
• Не отображается сам по себе — это промежуточное описание того, каким DOM должен быть.

Как они взаимодействуют

state изменился
  → React строит новое виртуальное дерево
  → сравнивает со старым (diffing / reconciliation)
  → вычисляет минимальный набор операций
  → применяет их к реальному DOM одним пакетом

Например, из списка в 1000 строк изменилась одна — React обновит один текстовый узел, а не перестроит список.

Отличия

• Природа: браузерная структура против JS-объектов в памяти.
• Стоимость операций: манипуляции с DOM дороги; создание/сравнение виртуальных деревьев дёшево.
• Кто управляет: реальным DOM в React-приложении управляет React; разработчик описывает желаемый результат.
• Побочные эффекты: изменение DOM запускает работу рендер-движка; изменение Virtual DOM — просто работа с объектами.

Нюанс

Virtual DOM не «быстрее DOM» в абсолюте — в конце всё равно меняется реальный DOM. Выигрыш в том, что изменения минимальны и батчатся, а разработчик избавлен от ручной оптимизации.

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

Реальный DOM — тяжёлое браузерное дерево, изменения которого вызывают reflow/repaint. Virtual DOM — дешёвая JS-копия: React строит новое дерево при каждом изменении, диффом находит отличия и применяет к реальному DOM только минимальный пакет обновлений.