virtual DOM 的 diffing 算法是否确定了唯一的区别和 patch real DOM?

Does virtual DOM's diffing algorithm pin-point the only difference and patch real DOM?

我对 Virtual DOM 及其 diff 算法的了解是,当某个组件(或元素 / 及其子元素)发生变化时,协调该特定组件和子元素是有效的因为除此之外,其他 DOM 组件将不会更改。

然而我已经知道 DOM 操作的耗时部分是重新计算元素样式的时刻(如 CSS)。

如果许多其他组件之间的组件发生变化,例如高度样式变化或被卸载,通过这种变化,下面的同级组件将受到影响,其中这些组件的样式应该全部重新渲染(重新布局或重绘)。

那么,React的对象——通过virtualDOM和diff算法只操作视图变化的部分——是不是就无法实现了?

是我误会了还是这正常?

如果这是正常的(由于在其他组件中间更改了组件,下面的其他组件也必须修改的情况),那么React与普通操作相比有什么优势DOM方法,而不是批处理或声明方法?可以叫它 "patch" 吗?

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

但是不管你是否使用react的virtualdom还是会出现这个问题

  • React 的虚拟 dom 的好处是它聚合了 dom 操作并对冗余操作进行去抖动(去重复)

    与"hand-coded"

  • 相比,这种广泛的优化通常会导致更少的 dom 操作
  • 在极少数情况下,通过非常仔细地手动管理 dom 操作

    ,您可以在没有 React 虚拟 dom 的情况下产生更优的结果

    去 'manual' 很少值得考虑

React 'virtual DOM' 只是一个 javascript 对象。与对帐时的样式和布局无关。在每次渲染之后,React 可以将这个对象与之前渲染的结果进行比较,并且只更新相应 DOM 元素的更改属性。 这是来自 React 文档的解释性图像,您可以看到更新已本地化。