在引擎盖下反应虚拟Dom

Question

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

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

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

• 我假设如果我们将虚拟dom与实际dom进行比较，Virtual dom只需要很少的时间来更新dom而不是真正的dom。但实际上怎么能证明这一点？

• 反应如何使用差异算法仅更新相应的组件 发生了哪些变化（如果我使用了setState方法）

任何视频讲座都会非常感激。

Answer 1

不，你读过的内容不正确。

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

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

回答您的问题：

1. Virtual DOM是普通JavaScript对象中实际DOM的表示。有关虚拟DOM的详细信息，请参阅此stackoverflow question和此内容 medium article

2. 在效率方面，操纵真正的DOM确实非常昂贵。另一方面，虚拟DOM非常有效。以下是一些文章，可以帮助您了解如何：Codecademy和 Medium article

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

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

Answer 2

如果某个组件的状态或道具发生变化，那么该组件及其子组件将被重新渲染，另外一个词 - 将调用所有这些组件的渲染方法。如果您想知道为什么没有调用组件的render方法，请插入您的代码片段。

您的子问题的答案：

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