--问题描述：
--正文:
1.什么是dom diff 算法？
@H_502_29@2.React的神奇之处：
@H_502_29@
@H_502_29@
当该节点state发生更改，连带着它所有的子节点都会发生更改，computer diff就会和真实的dom做一个比较，看看哪个节点发生更改，然后做一个重新的渲染，之所以做diff，就是为了在re-render时提高效率
github代码演示
@H_502_29@ 1）WEB UI中dom节点跨层级的移动操作特别少，可以忽略不计
@H_502_29@

基于策略1，即对树进行分层比较，两颗树只会对同一层次的节点进行比较，也就是说，只会对相同颜色方块内的dom节点进行比较，当发现该节点
不存在，该节点连同子节点完全被删除，不会用作比较，这样只用对树进行一次遍历，便能完成整个dom树的比较。
@H_502_29@ 2）拥有相同类的两个组件会产生相似的树型结构，拥有不同类的两个组件会产生不同树型结构
@H_502_29@ 基于策略2，在react中比较两个虚拟DOM节点，当两个节点不同时，分为两种情况：
@H_502_29@ 1.节点类型不同
RenderA:<Header/>
RenderB:<Content/>
RemoveNode <Header>,insertNode <Content/>
@H_502_29@
RenderA:<div style={{color: 'red'}} />
R
enderB:<div style={{color:‘green'}} />
RemoveStyle color，addStyle font-weight 'bold'
@H_502_29@ 3）对于同一层级的一组子节点，他们可以通过唯一id进行区分
@H_502_29@
@H_502_29@ 如上图，发现B!=A，
RemoveNode(A),CreatNode(B),inserNode(B)
@H_502_29@以此类推...创建ADC，删除BCD，针对这一现象提出优化：允许开发者对同
@H_502_29@ 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.参考资料：
