1

我的想法：

如果我们想在 dom 元素上做一些事情，我们可以这样做：

document.getElementById("#someId").DoSomething();
document.getElementById("#someId").DoSomethingElse();

在这种情况下，浏览器需要在整个 DOM 中搜索#someId 对象。然后它会忘记元素并再次搜索以执行 DoSomethingElse()。
为了解决“忘记并再次搜索”问题，我们可以将元素保存为JavaScript 对象。

    var someElement = document.getElementById("#someId");
    someElement .DoSomething();
    someElement .DoSomethingElse();

更进一步，我们可以保存整个元素组或整个节点以实现更好的性能。再上一步，我们将整个 DOM 保存为一个名为virtual dom的 JavaScript 对象。

这是理解虚拟 DOM 目的的正确方法吗？

对不起菜鸟问题，我不是前端开发人员，我只是好奇:)

4

1 回答 1

2

VirtualDOM 的要点是，实际上，您正在处理真实 DOM 的副本。但是使用该副本比使用实际 DOM 更快，因为它只有 React 实际需要的东西，而将特定的浏览器问题放在一边。

使用实际 DOM 的主要问题是它很慢。至少，使用这种副本会更快，在那里进行工作，并且更改已经完成，然后更新实际的 DOM。

是的，这听起来有点疯狂，但是计算状态更改和“一步”中的所有更改之间的差异比使用实际 DOM 进行更改要快。

此外，您在示例中只使用了一个 DOM 节点，但是您正在对 DOM 子树进行更改，这并不容易。

有关更详细的解释，您可以查看这篇文章：http ://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/

于 2017-11-08T10:57:55.937 回答