Javascript:当您对 DOM 进行更改时，整个 DOM 是否会更新？

Question

我最近开始学习 React 框架并读到 React 创建了一个虚拟 DOM 来跟踪更改。当 React 更新原始 DOM 时，它只会更新虚拟 DOM 上发生变化的对象。这是否意味着当我只使用纯 javascript 编程并附加一个新对象(例如一个新列表项)时，即使我只添加了一个新项目，整个 DOM 也会更新？

Answer 1

当您更新 DOM 时，会发生重排和重绘。
每次 DOM 发生变化时，浏览器都需要重新计算 CSS，进行布局并重新绘制网页。

React 并没有真正做任何新的事情。这只是一个战略举措。

它的作用是将真实 DOM 的副本存储在内存中。当您修改 DOM 时，它首先将这些更改应用到内存中的 DOM。然后，使用它的差异算法，找出真正发生了什么变化。
最后，它对更改进行批处理，并调用一次将它们应用到 real-dom 上。
因此，最大限度地减少了回流和重绘。