一、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/

          【深入react技术栈】——陈屹著