DOM означает объектную модель документа. Это интерфейс прикладного программирования. Мы используем DOM, когда взаимодействуем с веб-страницами. Когда я говорю «взаимодействовать», я имею в виду добавление контента, удаление контента и изменение контента в HTML-документе.

  • Документ — это просто веб-страница. Обычно в веб-дизайне и веб-разработке документ представляет собой HTML-документ.
  • Каждый элемент в вашем документе является объектом в глазах DOM. Это означает, что тег head — это объект, тег body — это объект, а UI — это объект.
  • Модель в основном описывает, как эти объекты располагаются в виде древовидной структуры.
  • Узлы — это все, что мы можем изменить в HTML-документе.

И мы уже знаем, что JavaScript очень хорошо работает с объектами, поэтому мы можем вызывать в нем методы и свойства. Итак, если мы можем манипулировать DOM напрямую, то зачем нам использовать виртуальный DOM?

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

Это проблема, которую решает виртуальный DOM. Вместо того, чтобы отображать все эти изменения в реальном DOM, мы сначала применяем их к виртуальному DOM. Виртуальный DOM — это облегченное представление DOM, которое существует в памяти и никогда не визуализируется. Это просто древовидная структура данных, представляющая простой объект JavaScript. Впервые он был популяризирован React. Он также используется другими фреймворками, такими как Angular 2 и Vue. Пакеты изменений вместе для эффективности, поэтому изменения дешевле.

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

Когда вы вызываете ReactDom.render(), вы строите это виртуальное дерево DOM в памяти. Таким образом, при первоначальном рендеринге язык шаблонов (JSX) сообщает компилятору шаблонов, как построить DOM-дерево в памяти. Интересно отметить, что React может отображать это виртуальное дерево в разных средах, а не только в реальном DOM. Он может отображать на iOS и Android, как React Native.

Поэтому, когда приложение обновляется, обычно путем вызова setState(), дерево полностью перестраивается. В любой момент в памяти одновременно существуют два виртуальных дерева. Это звучит расточительно, но дело не в том, что элементы React дешевы, а в том, что React уплотнит два дерева, сопоставит различия между ними и отобразит изменения в реальном DOM. Он использует алгоритм сравнения, чтобы найти минимальное количество операций, необходимых для обновления реального DOM. Таким образом, для каждого жизненного цикла реальный DOM обновляется только один раз.