什么是虚拟DOM，深入了解react虚拟DOM，看了一篇关于虚拟DOM的分析，觉得挺好，简单易懂，现总结如下
一、原始的生成步骤
1、state数据； 2、jsx模板
3、数据+模板 结合，生成真实的DOM，替换原来的DOM
ps：这边有个特别明显的缺点，就是直接拿新的DOM替换旧的DOM非常的消耗性能
二、改进步骤
1、state 数据
2、jsx 模板
3、数据+模板结合，生成真实的DOM，显示出来
4、当state发生了改变
5、数据+模板，生成新的DOM，但这个时候并没有直接替换
6、新的DOM与原有DOM进行比较，找出差异，替换差异（遍历所有的DOM进行对比，找差异时，相当损耗性能）
7、用新的DOM中的元素，替换老的DOM中的元素
ps：相比较第一种直接替换的方法，可以减少性能消耗，但是并不明显
三、react DOM
1、state 数据
2、jsx模板
3、数据+模板结合，生成真实的DOM，显示出来
1 | <div id="abc"><span>hello world !</span></div> |
4、同时生成虚拟DOM
这边的虚拟DOM的本质就是一个js对象，用它来描述真实的DOM（损耗性能）
1 | ['DIV',{ id : 'abc'},['span',{},'bye bye']] |
5、当state发生改变时
6、数据+模板 生成新的虚拟DOM
1 | ['DIV',{ id : 'abc'},['span',{},'bye bye']] |
7、新的虚拟DOM与原来的虚拟DOM进行比较
因为是虚拟DOM间比较，js比较js，不太消耗性能
8、找出差异，这边例子的区别是span中的内容发生改变
9、直接操作Dom，改变span中的内容
ps：性能提升明显
四、虚拟DOM 的diff算法
传统的diff算法，需要跨级比较两个树之间的不同，时间复杂度O(n^3)，这样的对比是无法接受的
react就提出了一个简单粗暴的diff算法，值对比同级元素，这样的话时间复杂度就变成了O(n)了。
其对比过程是这样的，
1、新建create：新的vd中有这个节点，旧的没有，
2、删除remove：新的vd上没有，旧的上有，
3、替换replace：新的vd上的tagName和旧的上面的不同
4、更新updata： 除了上面三点外的不同，具体是比较attributes先，然后再比较children
总结：因为是比较同级，会找到很多的不同，更新替换新建删除的过程较多，代价也还算是蛮大的，但这样的话时间复杂度就变成了O(n)，算是相对平衡的算法
- 本文作者： gtt
- 本文链接： https://gtt011029.github.io/posts/14775/