虚拟 DOM 学习笔记(转载)

132 阅读2分钟

虚拟 DOM

虚拟 DOM 是在 DOM 的基础上建立了一个抽象层,我们对数据和状态的任何改动,都会被自动且高效地同步到虚拟 DOM,最后再批量同步到 DOM。

React 会在内存中维护一个虚拟 DOM 树,当我们对这个树进行读与写的时候,实际上是对虚拟 DOM 进行的。当数据变化时, react 会自动更新虚拟 DOM,然后拿新的虚拟 DOM 和旧的虚拟 DOM 进行对比,找到有变更的部分,得出一个 Patch,然后将这个 Patch 放到一个队列里,最终批量更新这些 Patch 到 DOM 中。

这样的机制可以保证即便时根节点数据的变化,最终表现在 DOM 上的修改也只是受这个数据影响的部分,这样可以保证非常高效的渲染。

简单来说,虚拟 DOM 的实现原理分为3个部分:

  1. 用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;
  2. 使用 diff 算法比较两棵虚拟 DOM 树的差异;
  3. 使用 patch 算法将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

优点和缺点

优点:

保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作,它的一些 DOM 操作的实现必须是普适的,所以它的性能并不是最优的;但是比起粗暴的 DOM 操作性能要好很多,因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下,依然可以提供还不错的性能,即保证性能的下限;

无需手动操作 DOM: 我们不再需要手动去操作 DOM,只需要写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和 数据双向绑定,帮我们以可预期的方式更新视图,极大提高我们的开发效率;

跨平台: 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关,相比之下虚拟 DOM 可以进行更方便地跨平台操作,例如服务器渲染、weex 开发等等。

缺点:

无法进行极致优化: 虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

转载:

blog.itblood.com/2391.html

www.cnblogs.com/purpleraint…

blog.itblood.com/2389.html