引擎盖下的 React Virtual Dom

Posted 2023-02-22

【中文标题】引擎盖下的 React Virtual Dom

【英文标题】：React Virtual Dom under the hood

【发布时间】：2018-03-03 13:39:23

【问题描述】：

我从消息来源中了解到，如果我更新任何组件的状态而不是整个 virtual dom 将被渲染？是真的吗？如果是，那为什么不调用所有组件的渲染方法？

另外，需要澄清以下几点 -

Virtual Dom 实际上是什么？有什么实际的例子吗？

我假设如果我们将虚拟 dom 与实际 dom 进行比较，虚拟 dom 更新 dom 所需的时间比真实 dom 少。但是如何实际证明这一点呢？

react 如何使用 diffing algorithm 仅更新相应的组件 发生变化的地方（如果我使用 setState 方法）

非常感谢任何视频讲座。

【问题讨论】：

I've read from the sources… — 你在哪里读到的？什么来源？为什么不包括在你的问题中？

【参考方案1】：

不，您阅读的内容不正确。

当您更新组件的状态时，意味着您更改了虚拟 DOM 的一部分，您只会更改 React 虚拟 DOM 的特定部分，而不会更改其他任何内容。

所有其他组件都不会重新渲染。

回答您的问题：

虚拟 DOM 是纯 javascript 对象中实际 DOM 的表示。有关什么是虚拟 DOM 的全面详细信息，请参阅此 *** question 和此 medium article

就效率而言，操作真实的 DOM 确实非常昂贵。另一方面，虚拟 DOM 非常高效。这里有几篇文章可以帮助您了解如何：Codecademy 和 Medium article

Codecademy 解释了 diffing algorithm 的工作原理，但您也可以阅读以下内容以获取有关上述算法的更多信息 React's official documentation。

我相信我在这里找到并列出的文章足以了解虚拟DOM，虚拟DOM和真实DOM的性能差异以及如何差异算法有效

【参考方案2】：

如果某个组件的 state 或 props 发生了变化，那么这个组件和它的子组件都会被重新渲染，也就是说——所有这些组件的 render 方法都会被调用。如果你想知道为什么你的组件的 render 方法没有被调用，请插入你的 sn-p 代码。

回答您的子问题：

虚拟 dom 只是真实 dom 的代表。虚拟领域 object 只是普通的 js 对象，它完全反映了一些 真正的 dom 元素。 是的，你是对的。比较两个 js 对象（虚拟 dom）比比较两个 dom 元素要便宜得多。 React 使用复杂的 O(n) 算法来比较两个虚拟 dom 树。你不应该真正考虑这个，它是关于深入研究数学问题。