--问题描述：
--正文:
1.什么是dom diff 算法？
2.React的神奇之处：
在react中，构建UI界面的思路是用当前状态决定，不同的状态对应不同的界面，所以这势必要对
diff
算法进行优化，然后Facebook的工程师做到了
将
算法的时间复杂度降低到
O(n)
react机制图如下图：
当该节点state发生更改，连带着它所有的子节点都会发生更改，computer diff就会和真实的dom做一个比较，看看哪个节点发生更改，然后做一个重新的渲染，之所以做diff，就是为了在re-render时提高效率
github代码演示
3.三个前提策略(
基于这三个策略对算法进行优化
)：
1）WEB UI中dom节点跨层级的移动操作特别少，可以忽略不计

基于策略1，即对树进行分层比较，两颗树只会对同一层次的节点进行比较，也就是说，只会对相同颜色方块内的dom节点进行比较，当发现该节点
不存在，该节点连同子节点完全被删除，不会用作比较，这样只用对树进行一次遍历，便能完成整个dom树的比较。
2）拥有相同类的两个组件会产生相似的树型结构，拥有不同类的两个组件会产生不同树型结构
基于策略2，在react中比较两个虚拟DOM节点，当两个节点不同时，分为两种情况：
1.节点类型不同
RenderA:<Header/>
RenderB:<Content/>
RemoveNode <Header>,insertNode <Content/>
2.节点类型相同，但属性不同
RenderA:<div style={{color: 'red'}} />
R
enderB:<div style={{color:‘green'}} />
RemoveStyle color，addStyle font-weight 'bold'
3）对于同一层级的一组子节点，他们可以通过唯一id进行区分
一层级的同组子节点，添加唯一的key进行区分，如下图：
通过diff差异化对比时，通过key发现新老集合中的节点都是相同的节点，因此无需进行节点的删除和创建，只要将位置进行移动即可，react给出的
diff结果为：B D不做任何操作，移动A C即可
4.diff操作流程：
1）diff递归找出不同，存入差异数组，包含自身位置，父组件位置，差异类型diff
2）根据差异类型和差异信息，对旧的虚拟dom进行操作
const UPDATE_TYPES={
MOVE:1,//移动节点
REMOVE:2,//删除节点
INSERT:3,//插入节点
TEXT:4 //文本更新
}
3）所有处理结束后，一次性操作真实dom完成处理patch
5.参考资料：
