React Virtual Dom 引擎盖下

Question

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

此外，需要对以下几点进行一些说明 -

• Virtual Dom 究竟是什么？有什么实际的例子吗？

• 我假设如果我们将虚拟 dom 与实际 dom 进行比较，虚拟 dom 比实际更新 dom 花费的时间少dom。但是如何实际证明呢？

• react 如何使用 diffing 算法 只更新相应的组件 其中发生变化（如果我使用 setState 方法）

非常感谢任何视频讲座。

Answer 1

如果某个组件的state或者props发生变化，那么这个组件和它的子组件就会被重新渲染，换句话说——所有这些组件的render方法都会被调用。如果您想知道为什么您的组件的 render 方法没有被调用，请插入您的代码片段。

您的子问题的答案：

1. 虚拟 dom 只是真实 dom 的表示。虚拟 dom object 只是普通的 js 对象，它完全反映了一些 真正的 dom 元素。
2. 是的，你是对的。比较两个 js 对象（虚拟 dom）比比较两个 dom 元素便宜得多。
3. React 使用复杂的 O(n) 算法来比较虚拟的两棵树 dom。你不应该真的去想那个，这是关于深入数学问题。

Answer 2

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

当你更新一个组件的状态时，这意味着你已经改变了虚拟的一部分 DOM，你只会改变 React 的虚拟 DOM 的特定部分而不是其他任何东西。

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

您问题的回答：

1. 虚拟 DOM 是普通 JavaScript 对象中实际 DOM 的表示。有关什么是虚拟 DOM 的全面详细信息，请参阅此 Whosebug question 和此 medium article

2. 操纵真正的DOM确实在效率方面非常昂贵。另一方面，virtual DOM 非常高效。这里有几篇文章可以帮助您了解如何：Codecademy 和 Medium article

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

我相信我在这里找到和列出的文章足以理解 虚拟 DOM、虚拟 DOM 之间的性能差异] 和真正的 DOM 以及 差异算法 是如何工作的