虚拟DOM的差异算法是否可以找出唯一差异并修补实际DOM？

Question

我从虚拟DOM及其差异算法中学到的是，当某些组件（或元素/及其子组件）发生更改时，调和该特定组件和子组件非常有效，因为除此以外，其他DOM组件不会更改。

但是我已经知道，DOM操作的耗时部分是重新计算元素样式（如CSS）的时刻。

如果其他许多组件之间的某个组件发生更改，例如高度样式更改或被卸下，则通过这种更改，下面的兄弟组件将受到影响，这些组件的样式应该全部重新渲染（重新布局或重新绘制）。

那么，这不是意味着React的对象-通过虚拟DOM和diff算法仅操作视图的更改部分-不会实现吗？

我误会了，或者这是正常现象吗？

如果这是正常的（由于其他组件中间的组件发生了更改，因此还必须修改下面的其他组件），那么与批处理相比，React与纯DOM操作方法相比有什么优势？或声明性方法？可以称之为“补丁”吗？

Answer 1

您担心的是，更改父组件的样式可能会触发其子组件的浏览器布局

但是，无论您是否使用react的虚拟dom，仍然会出现此问题

• react的虚拟dom的好处在于，它聚合了dom操作并对冗余操作进行去抖动（去重复）

  与“手动编码”相比，这种广泛的优化通常会减少总的dom操作

• 在极少数情况下，通过非常仔细地手动管理dom操作，您可能能够在没有react的虚拟dom的情况下产生更佳的结果

  “手动”很少值得考虑

Answer 2

反应“虚拟DOM”只是一个javascript对象。对帐时与样式和布局无关。在每个渲染之后，React可以将该对象与上一个渲染的结果进行比较，并且仅更新相应DOM元素的已更改属性。 这是React doc的说明性图片，您可以看到该更新已很好地本地化。