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

原文地址:https://www.cnblogs.com/feng9exe/p/11733764.html