React当中的虚拟DOM

,

在react当中虚拟DOM可以说优化了很多我们对真实DOM的操作，优化了性能。

什么是虚拟DOM？

vdom可以看作是一个对象，使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息；

html：

`
<div class="demo"><span>123</span></div>
`
vdom(是一个json 对象，暂时用数组表示):

`
['div', { class: 'demo' }, ['span', {}, '123']]
`

如何实现虚拟dom？

思考一：

1. 生成state 数据；
2. 解析jsx模版；
3. 数据 + 模版 生成真实DOM显示出来；
4. state 发生变化；
5. 数据 + 模版 生成真实DOM替换到原有DOM；

缺点：

生成了2次DOM模版，数据发生变化将原有DOM整个替换掉；

思考二：

1. 生成state数据；
2. 解析jsx模版；
3. 数据 + 模版生成真实DOM显示出来；
4. state 发生变化； 
5. 数据 + 模版 生成真实DOM 并不替换原有DOM；？。，m n
6. 在内存中将新DOM（DocumentFragment）与原始DOM，做对比，找差异；
7. 找出对应的发生了变化；
8. 用新DOM对应的位置替换掉原始DOM发生变化的地方；

缺点：

虽然节约了整个替换的性能，但是也多了很多步骤，并且损耗了内存中做DOM比对的性能；在性能提升 
上并没有得到多大的提升；

思考三：

1. 生成state数据；
2. 解析jsx模版；
3. 数据 + 模版生成真实DOM显示出来；
4. 数据 + 模版生成原始虚拟DOM（Json），来表述真实DOM；
5. state 发生变化；
6. 数据 + 模版生成新的虚拟DOM，
7. 对比原始虚拟DOM与新的虚拟DOM的差异；
8. 操作真实DOM，将差异部分进行修改；

为什么react当中的虚拟DOM可以提高性能呢？

主要是因为减少了对真实DOM的操作，以及真实DOM的对比，取而代之的是用js对象的对比，这样实现 
了性能的极大的飞跃。