Что такое Virtual DOM и зачем он нужен?

Virtual DOM

Определение:
Virtual DOM — это легковесная JavaScript-копия реального DOM, которую React использует для оптимизации обновлений.

Как работает:

1. State изменился
2. React создаёт новый Virtual DOM
3. Сравнивает с предыдущим (Reconciliation)
4. Вычисляет минимальный набор изменений (Diffing)
5. Применяет только эти изменения к реальному DOM (Commit)

Почему это быстрее:

Прямые DOM операции дорогие:

// Каждая операция вызывает reflow/repaint
element.style.width = "100px";  // reflow
element.style.height = "100px"; // reflow
element.textContent = "Hello";  // repaint

Virtual DOM батчит изменения:

// React собирает все изменения
// И применяет их одной операцией

Алгоритм Reconciliation:

// Сравнение по типу элемента
<div> → <span>  // Полная замена поддерева
<div> → <div>   // Сравнение атрибутов

// Сравнение списков (ключи)
<li key="a">A</li>  // Ключ помогает
<li key="b">B</li>  // идентифицировать элементы

Keys для списков:

// Помогают React отслеживать элементы
{items.map(item => <Item key={item.id} {...item} />)}

Fiber Architecture (React 16+):

• Разбивает рендеринг на chunks
• Позволяет прерывать и возобновлять
• Приоритизация обновлений

Ограничения:

• Overhead на создание VDOM дерева
• Не всегда быстрее ручной оптимизации
• Для простых приложений может быть избыточен