5

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

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

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

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

  • react 如何使用差异算法仅更新发生更改的各个组件（如果我使用 setState 方法）

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

4

2 回答 2

2

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

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

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

回答您的问题：

  1. 虚拟 DOM 是纯 JavaScript 对象中实际 DOM 的表示。关于什么是虚拟 DOM 的全面详细信息可以在这个stackoverflow 问题和这篇 中型文章中找到

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

  3. Codecademy解释了差异算法的工作原理，但您也可以阅读以下内容以获取有关React 官方文档中提到的算法的更多信息 。

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

于 2017-09-22T05:56:56.097 回答
0

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

回答您的子问题：

  1. 虚拟 dom 只是真实 dom 的表示。虚拟 dom 对象只是普通的 js 对象，它完全反映了一些真实的 dom 元素。
  2. 你是对的。比较两个 js 对象（虚拟 dom）比比较两个 dom 元素便宜得多。
  3. React 使用复杂的 O(n) 算法来比较两个虚拟 dom 树。你不应该真正考虑这个，它是关于深入研究数学问题。
于 2017-09-22T04:47:00.547 回答