diff算法作为Virtual DOM的加速器，其算法的改进优化是React整个界面渲染的基础和性能的保障，同时也是React源码中最神秘的，最不可思议的部分。
传统diff、React diff
传统diff算法：
- 通过循环递归对节点进行依次对比，算法复杂度达到 O(n^3)
- 如果要展示1000个节点，得执行上亿次比较。。即便是CPU快能执行30亿条命令，也很难在一秒内计算出差异。
React diff：
- React15对传统的diff做了一些限制，使得时间复杂度变为了O(n)。
- 调和：将Virtual DOM树转换成actual DOM树的最少操作的过程
- diff算法：调和的具体实现。
- react的 diff 能减少到o(n)依靠的是react diff的三大策略
tree diffcomponent diffelement diff。
React 三大策略
tree diff：
相同层级：
- 首先，进行同级比较，并非循环比较。
- 这样比较次数就降为一层一次，时间复杂度直接降为O(n)
- 如果同级相同位置节点不一样，则直接删除替换，简单粗暴。
跨层级：
- 对于不同层级的节点，只有创建和删除操作
createA-->createB-->createC-->deleteA
component diff：
- component diff相当于是子树的diff，基本方案和tree diff是一致的
- 如果如下图D变为G，那么直接删除D这一整棵树，然后重新渲染G树。
element diff：
对于同一节点的元素，diff算法提供了三种操作：插入、移动、删除。分别为INSERT_MARKUP(插入)，MOVE_EXISTING(移动),REMOVE_NODE(删除)。
INSERT_MARKUP:新的组件类型不在旧集合中，即全新的节点，需要对新节点进行插入操作。MOVE_EXISTING:旧集合中有新组件类型，且element是可更新的类型，这时候就需要做移动操作，可以复用以前的DOM节点。REMOVE_NODE:旧组件类型，在新集合里也有，但对应的element不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作。
React中key的引入、性能的提升
未引入key之前的操作：
- 老集合中包含节点：A、B、C、D
- 更新后的新集合中包含节点：B、A、D、C
- 此时新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D。
- 都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可。
引入key之后的操作：
- 此时的操作，是B、D不做任何操作，AC移动到相应位置【前提是都有相同的唯一key】
- 如果，此时的key不相同，全都发生了变化，那么节点全都是要删除重新构建，将会消耗大量性能。
虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，在更新显示时key起着极为重要的作用。
- 当状态中的数据发生变化时，React会根据新数据 生成新的虚拟DOM，随后React进行新虚拟DOM与旧虚拟DOM的diff比较，比较规则如下：
- 1、 旧虚拟DOM中找到与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若虚拟DOM中内容变了,则生成新的真实DOM，随后替换掉页面中之前的真实DOM
- 2、 旧虚拟DOM中未找到与新虚拟DOM相同的key：
- 根据数据创建新的真实DOM，随后渲染到到页面
- 1、 旧虚拟DOM中找到与新虚拟DOM相同的key：