Что такое 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>  // идентифицировать элементы

Пример оптимизации:

// Без Virtual DOM
function updateList(items) {
    const ul = document.querySelector('ul');
    ul.innerHTML = '';  // Удаляем всё
    items.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        ul.appendChild(li);  // Много DOM операций
    });
}

// С React/Virtual DOM
function List({ items }) {
    return (
        <ul>
            {items.map(item => (
                <li key={item.id}>{item.text}</li>
            ))}
        </ul>
    );
}
// React обновит только изменившиеся элементы

Важные концепции:

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

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

2. Fiber Architecture (React 16+):

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

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

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