Как обрабатываются изменения в Virtual DOM?

Обработка изменений в Virtual DOM

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

Как работает процесс

Когда состояние компонента изменяется, React создает новое виртуальное дерево без изменения реального DOM. Затем он сравнивает старое и новое виртуальные деревья через процесс, называемый reconciliation (примирение).

Шаги обработки:

1. State/Props изменение — компонент получает новые данные
2. Render — React вызывает render() и создает новый Virtual DOM
3. Diffing (сравнение) — алгоритм сравнивает старое и новое дерево
4. Patch (патчинг) — только измененные части отправляются в реальный DOM

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

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

// 1. Компоненты разных типов создают разные деревья
const Old = () => <div><Component /></div>;
const New = () => <span><Component /></span>; // Полный пересчет

// 2. Key помогает идентифицировать элементы в списках
const items = list.map(item => (
  <Item key={item.id} data={item} />
));

Bez ключа (key) React может перепутать элементы при переупорядочивании, что приводит к неправильному состоянию.

Практический пример

import { useState } from react;

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

  // При клике изменяется состояние
  const handleClick = () => {
    setCount(count + 1);
  };

  // React создает новый Virtual DOM с count = 1
  // Сравнивает с предыдущим (count = 0)
  // Изменяет только значение в реальном DOM

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

В этом примере:

• При изменении count, React обновляет только <p>Count: {count}</p>
• <p>Name: {name}</p> и <button> остаются без изменений

Оптимизация: Memoization

Для предотвращения ненужных re-renders используются техники мемоизации:

// React.memo предотвращает пересчет при неизменных props
const UserCard = React.memo(({ user }) => {
  console.log(Re-render); // Сработает только при изменении user
  return <div>{user.name}</div>;
});

// useMemo сохраняет результат вычисления
const MemoComponent = ({ items }) => {
  const expensiveValue = useMemo(() => {
    return items.filter(item => item.active).length;
  }, [items]);

  return <div>Active: {expensiveValue}</div>;
};

// useCallback сохраняет функцию
const Form = ({ onSubmit }) => {
  const handleSubmit = useCallback((data) => {
    onSubmit(data);
  }, [onSubmit]);

  return <form onSubmit={handleSubmit}>...</form>;
};

Почему Virtual DOM эффективнее

Прямые манипуляции DOM дорогие:

• Каждое изменение вызывает reflow/repaint
• Браузер пересчитывает макет (layout) и перерисовывает (paint)
• Это может привести к 100+ операциям за одно обновление

Virtual DOM батчит изменения:

• Все изменения обрабатываются в памяти
• Затем одна операция обновляет реальный DOM
• Браузер делает единый reflow/repaint

Ключевые моменты

• Reconciliation — это процесс сравнения двух Virtual DOM деревьев
• Key prop критична для списков, чтобы правильно идентифицировать элементы
• Diffing алгоритм O(n) благодаря эвристикам, а не O(n³) как наивное сравнение
• Батчинг обновлений улучшает производительность