javascript - Todo like app中虚拟DOM的优势是什么

Question

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

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

由于 DOM 具有结构，我认为在很多情况下我们都知道我们将要进行的确切更改，我认为在这些情况下虚拟 DOM 没有优势。我是否遗漏了图片中的一些重要部分？

我看到一些关于虚拟 DOM 主题的其他讨论，我觉得它没有回答我的问题。我希望举个例子可以使它更具体。

Answer 1

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

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

现在 Virtual Dom 非常高效。您可以期待更高的性能、最佳的 CPU 与内存使用率。

您可以从我们的博客主题“在 React.js 中使用虚拟 DOM:5 大优势”中涵盖有关 Same 的详细主题报道

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