Javascript：当您更改DOM时，整个DOM是否更新？

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

更新DOM时，会发生回流和重新绘制。
每次DOM更改时，浏览器都需要重新计算CSS，进行布局并重新绘制网页

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

它所做的是在内存中存储真实DOM的副本。修改DOM时，它首先将这些更改应用于内存中的DOM。然后，使用它的扩散算法，找出真正的变化。 最后，它对更改进行批处理，并调用将其一次性应用于真实dom。

---

因此，尽可能减少回流和重新喷漆。

简言之，这取决于具体情况。可以对DOM进行几种类型的更改。发件人：

如果更改“布局”属性，使其改变元素的几何图形，如其宽度、高度或左上角的位置，浏览器将必须检查所有其他元素并“回流”页面

这些更改将需要重新绘制整个DOM。然而：

如果更改了“仅绘制”属性（如背景图像、文本颜色或阴影），换句话说，更改了不影响页面布局的属性，则浏览器将跳过布局，但仍会绘制

因此，比如说，某些文本的

color

属性只需要重新绘制该元素，而不需要重新绘制DOM的其他部分。您还可以直接进行合成，而不需要任何类型的重新绘制

---

浏览器尽可能少做必要的工作。

批量更改的确切含义是什么？React也将最终执行document.appendChild或document.getElementById，并正确执行更改？这将是一个完全不同的问题，下面是解释它的艺术。你可以看这篇文章