Коротко

Virtual DOM — лёгкое JS-представление дерева UI в памяти. React (и похожие библиотеки) сравнивают новое дерево со старым (diffing) и применяют к реальному DOM только нужные изменения (reconciliation).

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

Прямые манипуляции с DOM дорогие. Пакетное обновление через VDOM упрощает модель: «опиши UI как функцию от state», а библиотека сама решит, что трогать в браузере.

Важные нюансы (чтобы звучать middle+)

  • VDOM — не «всегда быстрее руками написанного DOM», это abstraction с trade-off.
  • Ключи (key) помогают React понимать идентичность элементов в списках.
  • В React 18+ картина сложнее (concurrent rendering), но идея «UI = f(state)» та же.

Короткий ответ

«Виртуальный DOM — JS-дерево UI. При изменении state строится новое дерево, находится разница, в реальный DOM уходят точечные правки.»