什么是虚拟DOM

我们现在经常听到虚拟DOM这个概念，那么究竟什么是虚拟DOM呢？

其实提到虚拟DOM，我们首先应该了解在没有虚拟DOM的情况下，在vue和React中又是怎样实现数据驱动视图的呢？下面就以React为例讲解：

首先我们要知道在react中 props,state,render函数之间的关系？

  答：当组件的props或者state发生改变的时候render就会改变，所以当stateg改变rende函数必然会执行，那么页面就会重新渲染

（1）React中的旧方法是这样解决数据驱动视图的改变的：

  ①state 数据

  ②JSX 模板

  ③数据 + 模板 结合，生成真实的DOM，来显示

  ④state 发生改变

  ⑤数据 + 模板 结合，生成真实的DOM，替换原始DOM

  缺陷：使用第二次生成的DOM替换第一次生成的DOM，非常耗性能

（2）于是旧方法非常的损耗性能，于是提出了以下新的方法：

  ①state 数据

  ②JSX 模板

  ③数据 + 模板 结合，生成真实的DOM，来显示

  ④state 发生改变

  ⑤数据 + 模板 结合，生成真实的DOM，并不直接替换原始DOM

  ⑥将新的DOM和原始的DOM作比对，找差异

  ⑦找出发生变化了的元素

  ⑧使用新的DOM只替换原来DOM中发生变化了的元素

  缺陷：性能提升并不明显

（3）以上方法通过减少DOM元素的替换，性能得到了一定的提升，但却并不明显，于是便引出了虚拟DOM，一个近乎完美的方法，其实现原理如下：

其与以前方法的主要区别就是：它创建和比较的都是JS对象，相对于直接去比较DOM元素性能大大提升！

  ①state 数据

  ②JSX 模板

  <div id = "div1"><span>hello</span></div>

  ③生成虚拟DOM（虚拟DOM是一个js对象，它用来描述真实的DOM）（损耗了性能）

  ['div',{id = 'div1'},['span',{},'hello']]

  ④ 用虚拟DOM结构生成真实的DOM，来显示

  ['div',{id = 'div1'},['span',{},'hello']]

  ⑤state发生变化

  ⑥数据 + 模板 生成新的虚拟DOM  （极大地提升了性能）

  ['div',{id = 'div1'},['span',{},'Bye']]

  ⑦比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容 （极大地提升了性能）

  ⑧直接操作DOM，改变span中的内容

  优点：

  ①性能提升了

  ②使得跨端应用得以实现，React Native