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

Question

Если кто-то спросит на примере Real DOM и Virtual DOM, может быть программно?Как это можно объяснить?

Answer 1

Предположим, у вас есть фактическое дерево DOM, подобное этому:

<div id="text">
 <div>
   text 1
 </div>
 <div>
   text 2
 </div>
</div>

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

<div id="text">
 <div>
   text 1
 </div>
 <div>
   text 2
 </div>
</div>

СейчасПредположим, что текстовый элемент div обновлен новым текстом, но передается полный #text div html для повторного рендеринга, поэтому виртуальный DOM будет сравнивать его с собственным деревом и будет просто рендерить обновленный HTML-элемент в фактическом DOM.

Replaceс этим div:

 <div>
  text 2
 </div>

Обновлен этот div:

 <div>
  text 3
 </div>

Таким образом, в заключение, виртуальный DOM сравнивает его с объектом на дереве и обновляет фактический DOM, когда обнаруживает какие-либо различия в любом элементе.и он обновляет только обновленную часть элемента вместо полного HTML, поэтому Virtual DOM очень быстр, и это основная концепция React.

Answer 2

Обычная манипуляция DOM

Если обновляется один из этих элементов списка, DOM повторно отображает весь список.Отсюда и неэффективность DOM.Это неэффективно, поскольку требует рекурсивного обхода каждого узла.

Виртуальный DOM

Поскольку данныесохраняется в состоянии, компоненты могут просто прослушивать события состояния и, если есть обновление, они могут повторно визуализировать в пользовательском интерфейсе.Затем реагирует только те элементы, которые изменились, оставляя в покое только те элементы, которые не изменились.

Answer 3

=> Здравствуйте, Шивани, пожалуйста, обратитесь по этой ссылке и посмотрите примеры.Реальный дом медленнее, а Virtual DOM быстрее, чем реальный DOM, и другие вещи - это то, что Virtual DOM - КОПИЯ Real DOM.

LINK : https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/