virtual DOM的作用：将DOM的维护工作由系统维护转交给virtual DOM维护

virtual DOM的作用：将DOM的维护工作由系统维护转交给virtual DOM维护

两个方面：对应用端 & 对DOM端（渲染准备的计算）

1、将DOM状态的维护工作由系统维护转交给virtual DOM维护

virtual DOM 比系统维护具有更高的效率；

2、virtual DOM 提供更便捷的操作接口，和更轻便的操作模型。

3、整体上是一个分层模型

应用层（virtual DOM API）—— virtual DOM（更高效的（变更）渲染计算）—— DOM (渲染呈现)

应用层（jquery）—— DOM (渲染呈现，系统实现)

4、可以将原声的dom渲染管理看成一个自适应的状态机（处理机制），以维护自己的状态。

virtual DOM将这套机制从DOM剥离并进行了优化。

DOM将状态维护的公共委托给了效率更高的virtual DOM。

VIrtual DOM概况来讲，就是在数据和真实DOM之间建立了一层缓冲。对开发者而言，数据变化了就调用React的渲染方法，而React并不是直接得到新的DOM进行替换，而是先生成Virtual DOM，与上一次渲染得到的Virtual DOM进行对比，在渲染得到的Virtual DOM上发现变化，然后将变化的地方更新到真实DOM上。

简单来说，React在提供给开发者简单的开发模式的情况下，借助Virtual DOM实现了性能上的优化，以致于敢说自己”不慢“。

————————————————

版权声明：本文为CSDN博主「Cacra」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/u014465934/article/details/83108983

You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.

For example, consider adding a node in DOM; react keep a copy of VDOM in memory

1. Create a VDOM with a new state
2. Compare it with older VDOM using diffing.
3. Update only differ nodes in real DOM.
4. Assign new VDOM as older VDOM.

https://stackoverflow.com/questions/21965738/what-is-virtual-dom

什么是Virtual DOM

Virtual DOM的概念有很多解释，从我的理解来看，主要是三个方面，分别是：一个对象，两个前提，三个步骤。

一个对象指的是Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM树的基本。

两个前提分别是JavaScript很快和直接操作DOM很慢，这是Virtual DOM得以实现的两个基本前提。得益于V8引擎的出现，让JavaScript可以高效地运行，在性能上有了极大的提高。直接操作DOM的低效和JavaScript的高效相对比，为Virtual DOM的产生提供了大前提。

三个步骤指的是Virtual DOM的三个重要步骤，分别是：生成Virtual DOM树、对比两棵树的差异、更新视图。这三个步骤的具体实现也是本文将简述的一大重点。

著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

原文: https://www.w3cplus.com/javascript/understand-the-Virtual-DOM.html © w3cplus.com