Как виртуальный дом взаимодействует с реальным DOM?

Как виртуальный дом взаимодействует с реальным DOM?

Что такое Virtual DOM?

Virtual DOM (VDOM) — это JavaScript представление реального DOM в памяти. Это лёгкая копия структуры DOM, которая позволяет React эффективнее обновлять интерфейс.

Процесс взаимодействия

Шаг 1: Создание Virtual DOM

Когда компонент рендерится, React создаёт VDOM дерево в памяти.

Шаг 2: Сравнение (Diffing)

Когда состояние изменяется:

1. React создаёт новое VDOM дерево
2. Сравнивает старое и новое VDOM
3. Выявляет, какие элементы изменились

Шаг 3: Обновление реального DOM (Commit)

React применяет только минимально необходимые изменения к реальному DOM.

Алгоритм сравнения (Diffing)

1. По типу элемента — если тип изменился, элемент пересоздаётся
2. По атрибутам (props) — если props изменились, обновляются атрибуты
3. По дочерним элементам — если детей больше/меньше, добавляются/удаляются

Оптимизация с Key

Bez key React может пересоздавать элементы в списках. С уникальным key React корректно отслеживает элементы:

// Хорошо: с уникальным key
items.map(item => <li key={item.id}>{item.name}</li>)

Почему Virtual DOM быстрее?

1. Батчинг обновлений — React накапливает и применяет изменения одновременно
2. Минимальные операции с DOM — обновляются только изменённые элементы
3. Отсутствие неэффективных перерисовок — браузер не перерисовывает всю страницу
4. Предсказуемость — React контролирует обновления

Performance Optimization

React.memo предотвращает ненужные рендеры:

const ListItem = React.memo(({ item }) => <li>{item.name}</li>);

useMemo для дорогих вычислений:

const processed = useMemo(() => computation(data), [data]);

Заключение

Virtual DOM — это абстракция между JavaScript и реальным DOM. React использует VDOM для определения изменений и минимизации обновлений реального DOM, что обеспечивает эффективный и предсказуемый рендеринг.