react--虚拟dom与diff算法

原理： React会先将你的代码转换成一个javascript对象，然后再把这个javascript对象转换成真实的DOM。而这个javascript对象就是所谓的虚拟DOM。

为什么要用虚拟dom，虚拟DOM为什么能提高性能：

react虚拟DOM 减少对真实DOM 的创建以及真实DOM 的对比 ，创建的都是js 对象， 对比的也是js 对象 ，因此react 底层实现极大的性能飞跃
DOM 实现（数据更新页面更新）：

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（doucmentFragment）和原始的DOM做对比，找差异

缺陷：

性能提升的并不明显

虚拟DOM方案：

1、state 数据

2、jsx 模板 ：

jsx-> createElement -> 虚拟DOM(JS对象) -> 真实的DOM

3、数据+模板结合，生成真实DOM来显示

4、生成虚拟DOM (虚拟DOM就是一个JS对象，用它来描述真实的DOM)（损耗性能）

5、state 发生变化

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

7、比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容
Diff(diffrence)— 同级比较

react 虚拟dom 是同层比对 逐层比对(index 作为key 是不稳定的)

8、直接操作DOM，改变span中的内容

优点：

1、性能提升了

2、它使得跨端应用得以实现–react native

小结

React 通过大胆的假设，制定对应的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题

通过分层对比策略，对 tree diff 进行算法优化
通过相同类生成相似树形结构，不同类生成不同树形结构以及shouldComponentUpdate策略，对 component diff 进行算法优化
通过设置唯一 key 策略，对 element diff 进行算法优化
tree diff 和 component diff 是从顶层设计上降低了算法复杂度，而 element diff 则在在更加细节上做了进一步优化。