react中的虚拟Dom与diff算法

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 做对比，找差异 // 真实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底层的性能

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