React.js 如何使用虚拟 DOM 加速渲染

Question

引用这篇（https://news.ycombinator.com/item?id=9155564）文章

简短的回答是 DOM 并不慢。添加和删​​除 DOM 节点是一些指针交换，只不过是在 JS 对象上设置一个属性。

DOM 瓶颈只是那些导致重绘的东西吗？如果是这样，那么来自 React 的虚拟 DOM 的渲染是否应该摊销到与重绘整个组件相同的性能（当然是在一个浏览器 API 调用中）？我认为浏览器执行的算法只会尝试重新绘制从一种状态到另一种状态的差异（可能像 git？）。暗示浏览器自己维护一个虚拟 DOM。那么拥有虚拟 DOM 的意义何在？

还应该添加一个将displaystyle 属性设置为none不会严重影响性能的元素吗？我会自己对此进行分析，但我不知道该转向哪里，因为我最近才开始使用 JavaScript 编程。

Answer 1

这个问题对于 SO 来说可能有些宽泛，但作为一般性答案，同一篇文章中的其他一些引述也非常相关：

然而，布局很慢...
[...]
更糟糕的是，通过访问某些属性来同步触发布局...
[...]
正因为如此，很多 Angular 和 JQuery 代码都非常缓慢
[...]
React 无助于加快布局...

react 的虚拟 DOM 所做的是计算 DOM 的一个状态和下一个状态之间的差异，并以非常聪明的方式最小化 DOM 更新。

所以：

• DOM 本身并不慢
• 但布局很慢
• 并且几乎所有 DOM 更新都需要布局更新
• 所以更少的 DOM 更新更快

而 React 引擎就是这样做的（与其他几个具有虚拟 DOM 的工具/库相同）。

有关什么是虚拟 DOM 及其优点的更多信息，例如这里。