像app

时间:2017-08-25 18:53:33

标签: javascript reactjs dom

我想我理解虚拟dom是如何工作的。它使用内部javascript对象来表示DOM结构,当某些内容发生变化时,它会对diff进行修改并修补真正的dom。但在很多情况下,我们知道我们做了什么改变,我们可以直接修补DOM。这不会比通过额外的差异步骤更快。

例如,对于TODO应用程序,我需要添加项目或删除项目,有时我需要检查项目以将其标记为已完成。在这些情况下,我确切地知道应该在DOM中执行操作的位置,并直接在精确节点处操作DOM。如果使用虚拟DOM,它将执行diff,并找到更改的内容,最后一步,它将应用更改并修补实际DOM。这正是我没有虚拟DOM所做的事情。如果我真正的DOM操作很昂贵,那么虚拟DOM的最后一步也很昂贵,对吗?

由于DOM具有结构,我认为在很多情况下我们知道我们将要做出的确切改变,在这些场景中我没有看到虚拟DOM的优势。我是否会错过图片中的一些重要内容?

我看到关于虚拟DOM主题的其他一些讨论并不认为它回答了我的问题。我希望举一个例子可以使它更具体。

1 个答案:

答案 0 :(得分:0)

虚拟DOM是一个节点树,列出内容,元素及其属性作为对象和属性。 React的render()方法从React组件创建节点树,并由于数据模型中的操作引起的突变而更新此节点树。与真实DOM相比,Virtual DOM是Real DOM的内存中表示。它是一个轻量级JavaScript对象,它只是Real DOM的副本。

React.js在任何时刻都维护着2个虚拟DOM。其中一个是更新的状态虚拟DOM,另一个是先前的状态虚拟DOM。 最大限度地缩短重新绘制屏幕所需的时间是浏览器制造商最关心的问题之一。可以做的最合适的事情是最小化和批处理需要重绘的DOM更改。这种改变DOM的策略是在另一个抽象层次上进行批处理和缩减,这是React的Virtual DOM背后的理念。

现在Virtual Dom很有效率。您可以期望更高的性能,最佳的CPU和内存使用率。

您可以在我们的博客主题"在React.js中使用虚拟DOM来覆盖相同的详细主题报道:前5大好处"

Viit: - http://www.rigelnetworks.com/using-virtual-dom-react-js-top-5-benefits/