一、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的差异化对比过程——【注意事项】：
过程目的：为了找到由旧的树结构得到新的树结构，最高效的方式
前提条件：已知新旧两棵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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
React dom过程
不可变数据，Immutable 是在 数据结构参数变化 到 虚拟dom对象的阶段。
diff算法是在 旧的虚拟dom 到 新的虚拟dom的阶段。
从数据结构 -> 虚拟对象 -> 到虚拟dom树 -> 新的虚拟dom -> 渲染成真实dom -> 挂载
相比于一版树形结构对比，算法复杂度可以从（o(n^3)）降低到 （o(n)）。
树形dom树结构如果有1000子节点，一般diff算法，会比较1000^3次，浪费资源。
diff策略提供了逐步提升渲染dom节点的性能，主要有 3 个策略
React diff 算法
将虚拟dom转换成真实dom的过程，称为调和，调和的具体实现就是 diff策略。
主要有 3类 diff算法，可以将复杂度 o(n^3) 转换为 o(n) 。
tree diff
(1), updateDepth对Virtual DOM树进行层级控制
(2), 同层比较，如果节点不存在，该节点及其子节点都会被删除
(3), 只需遍历一次，就能完成整棵dom树的比较
(4), 如果是跨层级，只有新建节点和删除节点的操作，推荐尽量不要跨层级，跨层级可用css display: none等手段完成。
component diff
(1), 同类型的两个组件，比较Virtual DOM树
(2), 若两次组件未发生变化可以通过 shouldComponentUpdate 做判断
(3), 不同类型的组件，会被判定作为脏组件处理，直接删除。或创建新组建
element diff
(1)，判断旧的和新的组件集合，如果有组件变更，需要重新创建
(2)，同组被子节点添加 唯一的key 进行组件区分，主要操作： 移动，插入，删除
重点说下移动
(1)，新旧节点会对比下标，新的下标称为lastIndex，旧的称为index，如果lastIndex大于index，需要将节点旧的节点移动到新的位置，相反则不动。
(2)，如果没有找到对应位置节点，新增； 如果旧的节点在新的节点组用不到，则删除；一般是在最后做删除操作。
(3)，特殊情形，最后一个节点移动到第一个位置，会导致，前面的n-1个节点的lastIndex都比较大，然后都后移，影响性能。尽量避免这样的操作。