react中的虚拟Dom与diff算法

传统：
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 做对比，找差异 // 真实dom做对比 。性能消耗
7. 找出哪里发生了变化
8. 只用新的发生了变化的部分，替换掉老的对应的之前的部分。 性能有所提升
缺陷： 性能的提升并不明显，有所消耗也有所提升。

React：

1.state 数据
2. jsx 模板
3. 数据 + 模板 生成虚拟dom（虚拟dom就是一个js对象，用它来描述真实dom） // 性能消耗极小
[‘div’,{ id : ‘abc’ } , [‘span’, {} , ’ hello world’ ] ]
4. 用虚拟dom的解构，生成真实dom来显示
<div id='abc'><span>hello world</span></div>
标签 - 属性 -内容 标签- 属性-内容
5. state 数据发生变化
6. 数据 + 模板 生成新的虚拟dom （极大的提示了性能）
<div id='abc'><span>bye bye </span></div>
7.比较原始虚拟dom和新的虚拟dom的区别，找到发生变化的地方（实质是两个js对象进行比对，极大的提示性能）
8.直接操作dom，改变发生变化的地方

虚拟dom实际上生成了一个js对象，生成一个js对象和生成一个真实dom相比，性能损耗是极低的。
流程示意：
jsx → createElement → 虚拟dom（js对象） → 真实dom
React.createElement(‘div’, {属性:‘属性值’} , ‘内容’)

虚拟dom的好处：
1.性能提升 。dom比对变成 js对象的比对
2.使得跨端应用得以实现 。React Native （js对象 → 生成原生应用组件）

Diff算法
虚拟dom的比对（js对象）方式，就叫做diff算法。
setState是异步的（调用时间间隔小的多次的setState调用合并成一次的setState调用）提升react底层的性能

1. 关键：同级比较 同层比对 算法简单
   当某一层的dom不一致时，把原始的dom不一致之后的所有的dom进行删除，重新生成节点下所有的dom，替换原始的dom。当有一层的节点不一致时，不会再往下进行比较，而是删除不一致节点之后的所有dom，重新生成不一致节点之后的dom。
   key值的关键。 形成一一对应的比对关系