reactjs - 在引擎盖下 React Virtual Dom

标签 reactjs virtual-dom

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

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

  • Virtual Dom到底是什么?有什么实际例子吗?
  • 我假设如果我们将虚拟 dom 与实际 dom 进行比较,虚拟 dom 更新 dom 所需的时间比真实 dom 少。但如何实际证明这一点?

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

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

最佳答案

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

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

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

回答您的问题:

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

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

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

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

关于reactjs - 在引擎盖下 React Virtual Dom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46356854/

相关文章:

javascript - handleSubmit 和 onChange handlerSubmit 导致 setState 错误或无法输入字符

reactjs - React 组件和 ReactElement 之间有什么关系?

javascript - 为什么 React 保留了 componentWillReceiveProps 和 shouldComponentUpdate 方法?

javascript - 使用虚拟 dom 和维护状态时的 CSS 动画

ReactJS:如何隐藏/取消隐藏切换列表项内的图像

reactjs - 如何将 HTML 元素添加到 JavaScript 对象中并在 React 中使用

javascript - 在异步操作中在新窗口中打开签名的 S3 URL 时出错

javascript - editly - 创建视频后在哪里可以获得返回值?

angular - 路由器导出之外的组件,在通过防护进行路由器重定向后没有更新其 window.location.href 吗?