虚拟DOM

一、虚拟DOM(本质上是一个JS对象)

1. 更改数据的流程

a. state数据

b. JSX 模板

c. 数据 + 模板生成虚拟DOM(虚拟DOM就是一个JS对象，用它来描述真实DOM) （损耗了性能）

    ['div', {id: 'abc'}, ['span', {}, 'hello world']]

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

     <div id='abc'><span>hello world</span></div>

e. state发生变化

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

    ['div', {id: 'abc'}, ['span', {}, 'bye bye']]

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

    使用了Diff算法

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

2. 为什么说虚拟DOM提高了性能

    因为创建真实DOM和比较真实DOM比较消耗性能，而虚拟DOM的创建和比较极大的提升了性能

3. JSX和虚拟DOM的关系

    JSX --> createElement --> JS对象 --> 真实DOM

    JSX模板并不是真实DOM，方便写代码简单简洁，其实是转化为createElement，再转为JS对象，最后转为真实DOM

    React.createElement('div', {}, 'item')

4. 优点

    a. 性能提升了

    b. 它使得跨端应用得以实现。React Native（原生是没有DOM概念的），虚拟DOM可以在原生应用中被识别，生成原生组件

 

二、虚拟DOM中的Diff算法

1. setState 是异步函数，为了提高react底层性能

同层虚拟DOM比较，逐层比对，如果一层的虚拟DOM不同，就不会继续比对，直接废弃下层所有的DOM，替换新的

2. key值比对，最好不要index

3. 上面两种就是属于diff算法