Главная3 курс UX/UI React1 занятие. Знакомство с React. Первое приложение3. Виртуальный DOM в React
1 занятие

3. Виртуальный DOM в React

Что такое Виртуальный DOM?

Виртуальный DOM (Virtual DOM) — это концепция и техническая реализация в React, которая представляет собой легковесную копию реального DOM (Document Object Model). Это JavaScript-объект, который хранит структуру DOM-дерева в памяти.

Простая аналогия

Представьте, что реальный DOM — это оригинальный чертеж здания, а виртуальный DOM — его эскиз. Прежде чем вносить изменения в основной чертеж, архитектор делает пометки на эскизе и только затем переносит окончательный вариант.

Как работает Виртуальный DOM

Процесс состоит из 4 основных этапов:

1. Создание виртуального DOM

Когда компонент рендерится, React создает его виртуальное представление:

// Ваш компонент
function MyComponent() {
  return (
    <div className="container">
      <h1>Привет, мир!</h1>
      <button>Нажми меня</button>
    </div>
  );
}

// React создает примерно такой виртуальный DOM-объект:
const virtualDOM = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Привет, мир!'
        }
      },
      {
        type: 'button',
        props: {
          children: 'Нажми меня'
        }
      }
    ]
  }
};

2. Обновление состояния (State Change)

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счет: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличить
      </button>
    </div>
  );
}

Когда вызывается setCount(), React:

  • Создает новый виртуальный DOM с обновленным значением
  • Не трогает реальный DOM на этом этапе

3. Сравнение (Diffing)

React сравнивает старый и новый виртуальный DOM:

// Старый виртуальный DOM
const oldVirtualDOM = {
  type: 'p',
  props: { children: 'Счет: 0' }
};

// Новый виртуальный DOM
const newVirtualDOM = {
  type: 'p', 
  props: { children: 'Счет: 1' }
};

// React находит разницу: изменился только текст

4. Реconciliation (Согласование)

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

// Вместо полного обновления всего DOM:
// document.body.innerHTML = '<div>...</div>';

// React делает только конкретное изменение:
pElement.textContent = 'Счет: 1';

Преимущества Виртуального DOM

1. Производительность

// БЕЗ Virtual DOM (прямые манипуляции)
for (let i = 0; i < 1000; i++) {
  document.getElementById('list').innerHTML += `<li>Элемент ${i}</li>`;
}
// 1000 перерисовок DOM!

// С Virtual DOM
const items = [];
for (let i = 0; i < 1000; i++) {
  items.push(`Элемент ${i}`);
}
// Только ОДНА перерисовка DOM!

2. Декларативный подход

// Вы говорите ЧТО хотите, а не КАК это сделать
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}
// React сам решает, как эффективно обновить DOM

3. Кроссплатформенность

Тот же принцип работает в React Native:

// React DOM
<div className="container">
  <h1>Заголовок</h1>
</div>

// React Native
<View style={styles.container}>
  <Text>Заголовок</Text>
</View>
// Виртуальный DOM абстрагирует платформу

Virtual DOM vs Real DOM

Аспект Real DOM Virtual DOM
Обновление Медленное (перерисовка) Быстрое (в памяти)
Манипуляции Императивные Декларативные
Производительность Низкая при частых обновлениях Высокая
Память Экономит Использует дополнительную

Почему это важно для разработчика

Вы пишете так:

function App() {
  const [data, setData] = useState([]);
  
  // Просто описываете интерфейс
  return (
    <div>
      <Header />
      <Content data={data} />
      <Footer />
    </div>
  );
}

React делает за вас:

  • Следит за изменениями
  • Находит минимальные обновления
  • Эффективно применяет их к DOM
  • Поддерживает производительность

Виртуальный DOM — это не магия, а продуманная архитектура, которая:

  • Абстрагирует сложные DOM-операции
  • Оптимизирует обновления через diffing алгоритм
  • Позволяет писать декларативный код
  • Обеспечивает высокую производительность

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

Далее