最近从vue应用转到react应用，

之前钻研过vue的diff算法，闲来看了看react的diff源码，写一点本人的见解

1.vue的diff算法

diff算法产生在虚构dom上

判断是否同一个节点：selector和key都要一样

diff规定：

  1. 只比拟同层的节点，不同层不做比拟。删除原节点，并且新建插入更新节点（理论开发中很少遇到）
  2. 新旧节点是同层节点，但不是同一个节点，不做精细化比拟。删除原节点，并且新建插入更新节点（理论开发中很少遇到）
  3. 新旧节点是同层节点，也是同一个节点，须要做精细化比拟

diff的精细化比拟策略

  1. 新的头部子节点，旧的头部子节点
  2. 新的尾部子节点，旧的尾部子节点
  3. 新的尾部子节点，旧的头部子节点
  4. 新的头部子节点，旧的尾部子节点

如果条件1满足，新旧节点头部指针往后移。

如果条件2满足，新旧节点尾部指针往前移。判断是否新的子节点先循环完（头尾地位指针判断），是：就是删除了节点，否：新增了节点，新增的节点依照条件4增加

如果条件3满足，须要挪动新的头部子节点到旧的尾部子节点前面

如果条件4满足，须要挪动新的头部子节点到旧的头部子节点后面

如果4种都未匹配到，并且指针条件未满足，须要loop匹配

vue在把被挪动的节点和匹配的节点设置为undefined

2.react的diff算法

从左往右顺次比照，利用元素的index和标识lastIndex进行比拟，如果满足index < lastIndex就挪动元素，删除和增加则各自依照规定调整

跨层不比拟，同层比拟，跟vue一样

diff策略

新节点的地位是lastIndex，旧节点的地位是index。从新的节点中顺次读取节点索引，比照旧的节点数据索引

  1. 不满足 index < lastIndex 的条件，不挪动；满足 index < lastIndex 的条件，挪动节点。
  2. 每一次比拟都须要从新设置 lastIndex=(index,lastIndex)中的较大数
  3. 挪动的节点在前一个被操作的节点前面
  4. 如果从新的节点汇合获取的节点在旧节点汇合未找到，就是新增，lastIndex为上一次的值不变
  5. 如果新的节点汇合遍历完了，旧节点还有值就是删除，loop删除掉就行

最恶心的状况：如果把最初一个元素移到最后面，react会顺次挪动节点向后

3.比照

类似的中央：vue和react的diff算法，都是不进行跨层级比拟，只做同级比拟。

不同点：

  1. vue会在patch函数中给被操作的节点打补丁（undefined），在diff的时候更清晰
  2. vue比照节点，当节点元素类型雷同，然而className不同时，认为是不同类型的元素，删除从新创立；而react则认为是同类型节点，进行批改操作
  3. diff策略，vue的性能优于react