React 中真实 DOM 和虚拟 DOM 的真实示例是什么？答案

【问题标题】：What is the real world example of real DOM and virtual DOM in React?React 中真实 DOM 和虚拟 DOM 的真实示例是什么？
【发布时间】：2018-09-28 09:03:05
【问题描述】：

如果有人问Real DOM 和Virtual DOM 的例子，可能是程序化的？这怎么解释？

【问题讨论】：

标签： reactjs react-native react-native-android

【解决方案1】：

普通 DOM 操作

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

虚拟 DOM

由于数据保存在状态上，组件可以简单地监听状态上的事件，如果有更新，它可以重新渲染到 UI。然后 React 只更新那些已经改变的元素，而留下那些没有改变的元素。

【讨论】：

【解决方案2】：

=> 您好 Shivani，请参考此链接并查看示例。 Real dom 很慢，Virtual DOM 比 real DOM 快，其他的都是 Virtual DOM 是 Real DOM 的 COPY。

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

【讨论】：

【解决方案3】：

假设你有这样的实际 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>

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

用这个 div 替换：

 <div>
  text 2
 </div>

更新了这个 div：

 <div>
  text 3
 </div>

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

【讨论】：