Что такое VDOM в React?

Virtual DOM (VDOM) в React

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

Что такое Virtual DOM простыми словами

Virtual DOM — это JavaScript представление реального DOM. Это лёгкая копия структуры вашего UI в памяти, которая работает намного быстрее, чем манипулировать реальным DOM напрямую.

// Реальный DOM (медленный)
const element = document.getElementById('app');
element.textContent = 'Hello'; // браузер перерисовывает
element.style.color = 'red';   // браузер перерисовывает снова

// Virtual DOM (быстрый)
// React накапливает изменения в памяти
// и потом применяет их одним разом

Как работает Virtual DOM

1. Начальный рендер

function App() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <button>Click me</button>
    </div>
  );
}

// React создаёт VDOM дерево:
// {
//   type: 'div',
//   props: { className: 'container' },
//   children: [
//     { type: 'h1', props: {}, children: 'Hello World' },
//     { type: 'button', props: {}, children: 'Click me' }
//   ]
// }

// Потом React преобразует его в реальный DOM

2. Обновление (re-render)

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// При клике на кнопку:
// 1. состояние меняется: count = 1
// 2. React создаёт NEW Virtual DOM с count=1
// 3. React сравнивает OLD и NEW VDOM (это называется "reconciliation")
// 4. React находит разницу (только текст в <p> изменился)
// 5. React обновляет ТОЛЬКО эту часть в реальном DOM

Процесс Reconciliation (согласование)

Это сложная часть Virtual DOM'а:

// OLD VDOM
{
  type: 'div',
  children: [
    { type: 'p', children: 'Count: 0' },
    { type: 'button', children: '+' }
  ]
}

// NEW VDOM
{
  type: 'div',
  children: [
    { type: 'p', children: 'Count: 1' },  // <-- изменилось
    { type: 'button', children: '+' }
  ]
}

// React применяет ТОЛЬКО это изменение в реальном DOM:
// document.querySelector('p').textContent = 'Count: 1';

Диффинг алгоритм

React использует эффективный алгоритм для поиска различий:

// ❌ Без key — React может переделать всё
function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li>{item.name}</li> // плохо — нет key!
      ))}
    </ul>
  );
}

// ✅ С key — React знает, какие элементы изменились
function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li> // хорошо
      ))}
    </ul>
  );
}

// Если добавлен новый item:
// Без key: React переделает все элементы списка
// С key: React только добавит новый элемент

Почему это быстрее, чем прямая работа с DOM

DOM операции очень дорогие

// ❌ Плохо — 100 перерисовок (reflows)
for (let i = 0; i < 100; i++) {
  document.body.innerHTML += `<div>Item ${i}</div>`;
}

// ✅ Хорошо — React отбатчивает обновления
setState(prevState => ({
  items: [...prevState.items, ...new100Items]
}));
// React это всё внутренне оптимизирует

Batching (батчинг)

function Component() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  
  const handleClick = () => {
    setCount(count + 1);  // 
    setName('John');      // } React батчит эти обновления
    // React перерисует ОДИН раз, не два
  };
  
  return (
    <div>
      <p>{count} - {name}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

Когда Virtual DOM помогает

✅ Много мелких обновлений — VDOM их батчит

for (let i = 0; i < 1000; i++) {
  setCount(c => c + 1);
}
// React применит 1000 обновлений в одну операцию

✅ Сложные UI структуры — VDOM справляется эффективнее

✅ Условный рендер — VDOM быстро находит различия

Когда Virtual DOM не очень помогает

❌ Уже оптимизированный код

// Если вы и так используете requestAnimationFrame
// и микрооптимизации, VDOM не добавит много

❌ jQuery сценарии

// Если есть много прямой DOM манипуляции
$('#button').click(() => {
  $('#content').html(newHTML); // VDOM не знает об этом
});

Практические примеры производительности

Список с 10000 элементов

function HugeList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// При обновлении одного item'а:
// Без VDOM: пришлось бы обновить весь <ul>
// С VDOM: React обновит только один <li>

Input field (часто обновляется)

function SearchBox() {
  const [query, setQuery] = useState('');
  
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <p>Search results for: {query}</p>
    </div>
  );
}

// При каждом символе в input:
// VDOM батчит обновления
// Браузер перерисует только то, что изменилось

React Fiber (современная архитектура)

Модернизация VDOM в React 16+:

// React может прерывать отрисовку для приоритизации
// Высокий приоритет: user input
// Низкий приоритет: данные в фоне

function Component() {
  const [urgent, setUrgent] = useState(0);
  const [background, setBackground] = useState(0);
  
  // Fiber позволяет React обновить urgent быстро
  // и потом обновить background
}

Когда VDOM может быть медленным

// ❌ Проблема: каждый render создаёт новый объект
function BadList() {
  return (
    <ul>
      {data.map(item => (
        <Item key={item.id} onClick={() => console.log(item.id)} />
      ))}
    </ul>
  );
}

// ✅ Решение: мемоизация
const Item = React.memo(({ onClick }) => ...)

Вывод

Virtual DOM — это абстракция, которая делает React разработку проще и быстрее. Вместо того чтобы думать о том, как обновлять DOM вручную, вы просто описываете, как должен выглядеть UI для каждого state'а. React автоматически:

• Создаёт VDOM
• Сравнивает старый и новый VDOM
• Обновляет только изменённые части в реальном DOM
• Батчит обновления для производительности

Это делает React приложения быстрыми и масштабируемыми.