reactjs - 在引擎盖下 React Virtual Dom

Question

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

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

• Virtual Dom到底是什么？有什么实际例子吗？

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

• React 如何使用差异算法仅更新相应的组件其中发生变化(如果我使用 setState 方法)

任何相关视频讲座将不胜感激。

Answer 1

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

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

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

回答您的问题:

1. 虚拟 DOM 是纯 JavaScript 对象中实际 DOM 的表示。有关什么是虚拟 DOM 的全面详细信息可以在 stackoverflow question 中找到。和这个 medium article

2. 操作真实的 DOM 在效率方面确实是非常昂贵的。另一方面，虚拟 DOM 非常高效。以下几篇文章可以帮助您了解具体方法:Codecademy和 Medium article

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

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