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

Что такое ДОМ?

DOM (объектная модель документа) представляет веб-страницы в виде древовидной структуры данных, содержащей логическую структуру документов. Корневой узел дерева — это не что иное, как документ, являющийся частью самого браузера. Все элементы HTML являются прямыми или косвенными узлами корневого узла или документа браузера.

DOM содержит не только элементы HTML, которые включают теги элементов, такие как ‹h1›, ‹title› и т. д., но также содержит закомментированные строки или код и узлы, связанные со стилями CSS. Манипулировать реальным DOM дорого, так как новый DOM создается после любого обновления, а затем визуализируется браузером для отображения пользовательского интерфейса. Ниже приведены операции, которые выполняются при обновлении элемента:

document.getElementById('elementId').innerHTML = "Updated value"
  1. Браузер должен разобрать HTML
  2. Удаляет дочерний элемент elementId
  3. Обновляет DOM с «новым значением»
  4. Пересчитайте CSS для родительского и дочернего элементов.
  5. Обновите макет, т.е. точные координаты каждого элемента на экране.
  6. Пройдите по дереву рендеринга и нарисуйте его на экране браузера.

Поэтому обновление или манипулирование любым элементом HTML является дорогостоящей операцией. Чтобы решить эту проблему, в React был введен виртуальный DOM.

Виртуальный дом

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

Основное различие между Real DOM и Virtual DOM заключается в том, что Virtual DOM содержит только компоненты React (или JSX), в то время как Real DOM содержит не только элементы HTML, но и узлы CSS. Это делает реальный DOM намного тяжелее, чем виртуальный DOM, и, следовательно, обновление виртуального DOM намного дешевле, чем реального DOM.
Ниже приведены операции, которые выполняются при обновлении любого компонента в React:

  1. Когда компонент обновляется, текущая виртуальная модель DOM обновляется, и создается новая виртуальная модель модели со всеми обновлениями. Это можно сделать следующим образом:
    а. Если родительский компонент обновляется, то обновляются и все дочерние элементы этого родительского компонента.
    б. Если обновляется только дочерний узел, то обновляется только этот дочерний узел.
  2. Теперь обновленный виртуальный DOM сравнивается с предыдущим состоянием виртуального DOM, чтобы определить обновленные узлы. Используя это, Real DOM обновляется. Виртуальный DOM сравнивается путем обхода каждого узла как виртуального DOM (обновленного, так и предыдущего состояния). Обход выполняется с использованием алгоритма BFS. BFS (поиск в ширину) используется вместо алгоритма DFS, потому что DFS может войти в бесконечный цикл при обходе огромной древовидной структуры.
    Кроме того, поиск разницы между двумя деревьями может иметь временную сложность O(n³), а React использует эвристический подход, из-за которого эту разницу можно найти с временной сложностью O(n).
  3. На втором этапе используется алгоритм сравнения.
  4. Последний шаг — обновить узлы в Real DOM. Real DOM обновляется партиями, а не по одному узлу за раз. Повторный рендеринг пользовательского интерфейса — самая затратная часть, и React гарантирует наиболее эффективное обновление пользовательского интерфейса.

Описанный выше процесс сравнения виртуального DOM и последующего обновления реального DOM известен как согласование.

Заключение

В этой статье мы обсудили, что такое Virtual DOM и как Virtual DOM помогает React повысить производительность.