Todo like 应用中虚拟 DOM 的优势是啥

Posted 2023-02-22

【中文标题】Todo like 应用中虚拟 DOM 的优势是啥

【英文标题】：what is the advantage of virtual DOM in Todo like appTodo like 应用中虚拟 DOM 的优势是什么

【发布时间】：2018-02-03 21:13:17

【问题描述】：

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

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

由于 DOM 具有结构，我认为在很多情况下我们知道我们将要进行的确切更改，我看不出虚拟 DOM 在这些场景中的优势。我错过了图片中的一些重要部分吗？

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

【问题讨论】：

Why is React's concept of Virtual DOM said to be more performant than dirty model checking?的可能重复

【参考方案1】：

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

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

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

您可以从我们的博客主题“在 React.js 中使用虚拟 DOM：5 大好处”中涵盖有关相同的详细主题覆盖范围

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