什么是虚拟DOM？

普通HTML标签写法

<a class="link" href="https://github.com/facebook/react">React<a>

  

 

  
1
 

在js中手动生成相同dom的写法

var a = document.createElement('a')
a.setAttribute('class', 'link')
a.setAttribute('href', 'https://github.com/facebook/react')
a.appendChild(document.createTextNode('React'))

  

 

  
1
  
2
  
3
  
4
 

这是一种封装，沿用的React.createElement的命名

var a = React.createElement('a', { className: 'link', href: 'https://github.com/facebook/react'
}, 'React')

  

 

  
1
  
2
  
3
  
4
 

所有html结构，都可以用js dom来构造，而且能将构造的步骤封装起来，做到「数据-dom结构」的映射。缓存初始数据，新数据进来时，与旧数据对比，找到差异，根据差异本身的性质进行dom操作；无差异，则不作为。
dom本身在js中就是一种数据结构，console.dir(document.body)，在控制台可以看到body的数据结构。然而，dom相关的数据丰富而且复杂，我们其实只关心少数元素的少数属性。建立一个javascript plain object，非常轻量，用它保存我们真正关心的与dom相关的少数数据；对它进行操作，然后对比操作前后的差异，再根据映射关系去操作真正的dom，无疑能提高性能。这就是虚拟DOM。

参考

• https://www.zhihu.com/question/29504639/answer/44662943

文章来源: javaedge.blog.csdn.net，作者：JavaEdge.，版权归原作者所有，如需转载，请联系作者。

原文链接：javaedge.blog.csdn.net/article/details/114323978