react中的虚拟DOM，虚拟DOM为何大大提升性能

此文档通过慕课网学习视频做的笔记

看官莫急，急的话，直接看最后 改进方法二 React

原始方法

1、state数据
2、JSX 模版
3、数据+模版 结合，生成真实的DOM，来显示
4、state发生改变
5、数据+模版 结合，生成真实的Dom，替换原始的DOM

缺陷：
第一次生成真实的完整的dom片段
第二次生成真实的完整的dom片段
第二次的dom替换第一次的dom，非常耗性能

改进方法一

1、state数据
2、JSX 模版
3、数据+模版 结合，生成真实的DOM，来显示
4、state发生改变
5、数据+模版 结合，生成真实的Dom，替换原始的DOM
6、新的DOM和原始的DOM做对比，找差异
7、找出发生变化的是标签
8、只用新dom的变化标签替换老DOM的标签

缺陷：性能的提升并不明显

改进方法二 React

1、state数据
2、JSX 模版
jsx->creatElement->js对象虚拟dom->真实的dom结点

3、生成虚拟dom(实际上就是一个js对象，用它来描述真实DOM)（消耗性能极低）
虚拟dom表示上面的标签[‘div’,{id:‘abc’},[‘span’,{},‘hello’]]
4、用虚拟dom的结构，生成真实的DOM，来显示

 真实DOM:<div id="abc"><span>hello</span></div>

5、state发生改变
5、生成新的虚拟dom
[‘div’,{id:‘abc’},[‘span’,{},‘bye bye’]]
6、新的虚拟DOM和原始虚拟DOM做对比，找差异，找出 span内容发生变化（两个js的比对耗能极低）
7、直接操作DOM，改变span中的内容

优点：性能大大提升