Народ, всем привет. React — одна из самых популярных JavaScript-библиотек для создания пользовательских интерфейсов. Одной из ключевых фишек React считается Virtual DOM (виртуальный DOM). Он делает React быстрым, эффективным и отзывчивым. Но как именно работает Virtual DOM? Почему он лучше "настоящего" DOM? А давайте-ка разберемся!
Что такое DOM?
Начнем с азов. DOM (Document Object Model) — это представление HTML-документа в виде дерева объектов. Пример HTML:
<div>
<h1>Hello, world!</h1>
<p>Welcome to my site</p>
</div>
В DOM это будет выглядеть примерно так:
div
├── h1
└── p
Каждый элемент становится "узлом" дерева. Когда браузер рендерит страницу, он строит это дерево. Но у такого подхода есть несколько важных проблем, благодаря которым работать с ним JavaScript’у становится тяжело:
- медленный доступ: взаимодействие с реальным DOM через JavaScript — операция дорогая.
- переотрисовка: любое изменение может привести к полной или частичной перерисовке страницы.
- фрагментированные обновления: трудно контролировать, какие части DOM действительно нужно обновить.
Что такое Virtual DOM?
Virtual DOM (виртуальный DOM) — это легковесная копия настоящего DOM, хранящаяся в памяти. React использует эту копию, чтобы эффективно обновлять интерфейс. Когда ты изменяешь состояние компонента, React создает новый Virtual DOM, после чего сравнивает его с предыдущей версией (это называется "diffing"), находит минимальные изменения и обновляет только измененные части реального DOM. Простыми словами, у него есть копия структуры страницы (облегченная, выкинув оттуда все лишнее) ДО и ПОСЛЕ, он их сравнивает, видит, какой элемент у него поменялся в цепочке и меняет на реальной странице только его.
Как React обновляет DOM?
1. Рендеринг Virtual DOM. Каждый компонент React рендерит структуру, похожую на DOM, но это просто обычные объекты JavaScript.
const element = <h1>Hello</h1>;
Превращается в:
{
type: 'h1',
props: {
children: 'Hello'
}
}
2. Сравнение деревьев (Diffing). Когда состояние компонента меняется, React создает новое дерево и сравнивает его с предыдущим. Алгоритм diff делает поиск различий между двумя деревьями, использует ключи (key), чтобы быстро определять изменения в списках и предполагает, что узлы на одном уровне можно сравнивать, а глубже — рекурсивно.
3. Обновление реального DOM (Reconciliation). React создает список "патчей" — изменений, которые нужно внести. Он применяет их с помощью document.createElement, node.appendChild, node.removeChild и других DOM-операций
Я думаю, главный плюс данного подхода понятен - React минимизирует количество изменений, экономя ресурсы. Но и это еще не все:
1. Batched Updates (пакетные обновления) - React группирует несколько изменений в одно обновление DOM. Это снижает количество операций.
setState({ a: 1 });
setState({ b: 2 });
// Реальный DOM обновится один раз
2. ShouldComponentUpdate / React.memo - позволяет предотвратить ререндеринг, если пропсы или состояние не изменились.
По итогу получается, что Virtual DOM позволяет работать в памяти быстрее, чем с DOM-деревом. Изменения "собираются" и применяются разом, можно использовать "умные" алгоритмы диффа, делать меньше перерисовок, отсюда больше производительности. React делает всю магию за кулисами — тебе нужно просто писать компоненты, а обновления будут быстрыми и оптимальными.