一、diff策略
1.Web UI中DOM节点跨层级的移动特别少，可以忽略不计
2.拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构
3.对于同一层级的一组(具有相同父元素的)子节点，它们可以通过唯一id进行区分(即key)
二、tree diff（两棵组件树之间的比较。比较两棵树的结构）
基于策略1，React对树的算法进行了简洁明了的优化，即：对树进行分层比较，两棵树只会对 同一层次 的节点进行比较。
【注意】 这里比对的，是同一父节点下的所有子节点。如下图，React只会对相同颜色方框内的DOM节点进行比较
三、component diff（组件的差异比较过程）
数据层面的差异比较
1.如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：<div id="before"></div>与<div id="after"></div>)，按照原策略继续比较Virtual DOM树即可
2.如果出现不是同一类型的组件，则将该组件判断为dirty component，从而替换整个组件下的所有子节点
（即：假如treeA(旧组件树)的某个节点A，在树状结构中，对应treeB(新组件树)的节点B。如果节点B和与节点A不是同一类型的组件，则节点A及其所有子节点，将全部被删除，并且重新创建节点B及其子节点）
ps：对于同一类型的组件，有可能其Virtual DOM没有任何变化(即，子节点的顺序、状态state等，都未发生变化)，如果能够确切知道这点，那么就可以节省大量的diff运算时间。因此，React允许用户通过shouldComponentUpdate()来判断该组件是否需要进行diff算法分析
注：
比较的是：
（1）同组节点集合内容，是否改变。即，假如某节点A在旧结构中拥有两个子节点B、C，如果新结构中A同样拥有B、C两个子节点，无论B、C位置是否交换，都认为component层面未发生改变。
（2）相同组件数据是否改变。如某组件A的state等数据发生改变，component diff会发现差异，并进行组件的更新。
四、element diff（同一层级同一父元素下的节点集合，进行比较，真实DOM渲染前，比较节点结构的变化）
真实DOM渲染，结构差异的比较
1.INSERT_MARKUP：新的组件类型不在旧集合里，即全新的节点。需要对新节点执行插入操作
2.MOVE_EXISTING：旧集合中有新组件类型，且element是可更新的类型。generateComponentChildren已调用receiveComponent，这种情况下prevChild=nextChild，就需要做移动操作，可以复用以前的DOM节点
3.REMOVE_NODE：旧组件类型，在新集合里也有，但对应的element不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作
个人理解：
component diff 后，准备好了所有的组件(即节点)，都是新结构需要的组件，并且每个组件都包含了新的state等数据。
element diff ，是根据新的DOM结构，寻找由旧结构、更新至新结构最高效的方式。
五、(element diff)节点移动过程
概览图示：
对节点进行diff差异化对比
diff的差异化对比过程——【注意事项】：
过程目的：为了找到由旧的树结构得到新的树结构，最高效的方式
前提条件：已知新旧两棵Virtual DOM树的树结构
diff的差异化对比过程——【总体流程】：
依次取出新集合中的每个节点，通过key值，确定当前节点是否存在于旧集合中，如果存在，再进行其他的比较、判断，确定旧集合中的此节点是否需要移动。
diff的差异化对比过程——【重要变量】：
1.lastIndex：一个标记值，只用作对比大小，来决定是否进行节点移动。初始值为0
2.nextIndex：新集合下一个要取的节点的坐标。用于确定新集合当前已取到第几个节点，从而继续遍历。初始值为0
3._mountIndex：旧集合中当前节点的坐标
具体步骤：
【初始化】lastIndex=0，nextIndex=0
1.取新集合第一个节点，B
第一步
(1)key=b，旧集合中存在。对应_mountIndex=1，此时lastIndex=0，nextIndex=0
(2)if(child._mountIndex < lastIndex) ? ——No，节点不移动
(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=1
(4)prevChild._mountIndex=nextIndex。新集合中，B._mountIndex=0
(5)nextIndex ++ 。nextIndex=1，进入下一个节点的判断
2.取新集合第二个节点，A
第二步
(1)key=a，旧集合中存在。对应_mountIndex=0，此时lastIndex=1，nextIndex=1
(2)if(child._mountIndex < lastIndex) ? ——Yes，节点移动！
(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=1
(4)prevChild._mountIndex=nextIndex。新集合中，A._mountIndex=1
(5)nextIndex ++ 。nextIndex=2，进入下一个节点的判断
3.取新集合第三个节点，D
第三步
(1)key=d，旧集合中存在。对应_mountIndex=3，此时lastIndex=1，nextIndex=2
(2)if(child._mountIndex < lastIndex) ? ——No，节点不移动
(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=3
(4)prevChild._mountIndex=nextIndex。新集合中，D._mountIndex=2
(5)nextIndex ++ 。nextIndex=3，进入下一个节点的判断
4.取新集合第三个节点，C
第四步
(1)key=c，旧集合中存在。对应_mountIndex=2，此时lastIndex=3，nextIndex=3
(2)if(child._mountIndex < lastIndex) ? ——Yes，节点移动！
(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=3
(4)prevChild._mountIndex=nextIndex。新集合中，C._mountIndex=3
(5)nextIndex ++ 。nextIndex=4。发现新集合已经遍历完毕，diff操作到此完成
参考：http://www.infoq.com/cn/articles/react-dom-diff/
作者：南慕瑶
链接：https://www.jianshu.com/p/650246766f67
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。