理解react的diff算法

• 关于React的diff算法

React活着diff的核心目的，就是不管页面多大，DOM怎么变化，我都以最小(其实不是）的代价去更新DOM

1 React并不是说比原生操作DOM更快，相反由于有diff反而会有性能损失

diff性能损失为什么还要用？

因为diff可以以最小的代价来更新DOM，如何最小代价更新了 ？

内存中存有虚拟DOM即用对象来展示的DOM
{
    type:'div'
    props:'xx'
}

这样每次更新的时候，对比新旧虚拟DOM，以最小的代价去操作DOM,改变DOM

如果在顶层setState将导致整棵树walk一边，而原生只需要句获取DOM更新即可
于是出现了shouldComponentUpdate

• 原生更新对比虚拟DOM更新

原生innertHTML更新
js计算量和DOM操作：都与界面大小有关

虚拟DOM：
只有js的计算与界面大小有关
DOM的操作和数据的变动量相关

关键：
和DOM操作起来，js的计算是极其便宜的

所以虚拟DOM，保证了，不管你的数据变化多少，每次重绘的性能都是可以接受的

innerHTML: render html string O(template size)  + 重建所有DOM元素（DOM Size)
innerHTML: render Virtual DOM + diff O(template size) + 必要的 DOM 更新 O(DOM change)

我看来 Virtual DOM 真正的价值从来都不是性能，而是它为函数式的 UI 编程方式打开了大门；

• diff其实不是最小代价

为了降低复杂度O(n3)---O(o)

采用组件组件顺序对比，不一样则重新渲染,key解决

而且diff算法的时候，一旦发现父级的DOM类型不一样，则整个直接替换掉，全部DOM更新