Question

如果有人要求提供Real DOM和Virtual DOM的示例，可能是通过编程的方式？怎么解释？

Answer 1

常规DOM操作

如果这些列表项之一更新，则DOM重新呈现整个列表。这就是DOM效率低下的原因。这是低效的，因为它需要递归遍历每个节点。

虚拟DOM

由于数据保存在状态中，因此组件可以仅侦听状态中的事件，如果有更新，则可以将其重新呈现到UI。然后，React只更新那些已更改的元素，而不会更新那些没有更改的元素。

Answer 2

=>您好Shivani，请参考此链接并查看示例。真正的dom较慢，而虚拟DOM则比真实DOM快，而其他情况则是虚拟DOM是真实DOM的COPY。

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

Answer 3

假设您有这样的实际DOM树：

width

现在假设您有虚拟DOM树，它是第一次的实际DOM树副本：

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

现在假设文本2 div元素已更新为新文本，但传递了完整的#text div html进行重新渲染，因此虚拟DOM会将其与自己的树进行比较，并且只会在实际DOM中重新渲染更新的HTML元素。

替换为该div：

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

更新了该div：

 <div>
  text 2
 </div>

因此，总而言之，虚拟DOM与其在树上的对象进行比较，并在发现任何元素之间存在任何差异时更新实际DOM，并且仅更新更新的元素部分而不是完整的HTML，因此虚拟DOM非常快，这是主要的React的概念。