Real diff算法

说说Real diff算法是怎么运作的？

第一次render在执行的时候会将第一次的虚拟dom做一次缓存，第二次渲染的时候会将新的虚拟dom和老的虚拟dom进行对比。这个对比的过程其实就是diff算法。

在DOM需要更新的时候，通过diff算法可以 计算出 虚拟DOM 中真正变化的部分，从而只针对变化的部分进行更新渲染，避免”牵一发而动全身“，造成性能浪费。

为了优化diff算法，react中对普通的diff算法实行了三大策略

tree diff

1. 对比时，遇到同一类型的组件遵循 tree diff，进行层级对比

2. 对比时，一旦遇到不同类型的组件，直接将这个不同的组件判断为 dirty component（脏组件），并替换该组件和之下所有的子节点。

3. 对比时，在同一类型的两个组件中，如果你知道这个组件的 Virtual DOM没有任何变化，你（开发者）就可以手动使用 shouldComponentUpdate() 来判断组件是否需要进行diff，进一步的提升了diff效率和性能

   优化点
   避免使用结构相同但是类型不同的组件，因为虽然组件的结构不需要改动，但是由于类型不同的原因，diff会直接销毁该组件并重建，虽然这种情况极少出现，但是造成的性能浪费挺严重的。
   对于同一类型并且没有变化的组件，合理使用 shouldComponentUpdate() 进行优化

component diff

component diff是组件间的对比
在遇到组件之间的比较时，有三种策略

1. 对比时，遇到同一类型的组件遵循 tree diff，进行层级对比

2. 对比时，一旦遇到不同类型的组件，直接将这个不同的组件判断为 dirty
   component（脏组件），并替换该组件和之下所有的子节点。

3. 对比时，在同一类型的两个组件中，如果你知道这个组件的 Virtual
   DOM没有任何变化，你（开发者）就可以手动使用 shouldComponentUpdate()
   来判断组件是否需要进行diff，进一步的提升了diff效率和性能

   优化点

   避免使用结构相同但是类型不同的组件，因为虽然组件的结构不需要改动，但是由于类型不同的原因，diff会直接销毁该组件并重建，虽然这种情况极少出现，但是造成的性能浪费挺严重的。
   对于同一类型并且没有变化的组件，合理使用 shouldComponentUpdate() 进行优化

element diff

element diff 是针对同一层级的element节点的

在双方同一层级的节点对比时，有三种情况

1. 面对全新的节点时，执行插入操作 —— INSERT_MARKUP

2. 这点不需要过多解释，面对多余的节点时，执行删除操作 —— REMOVE_NODE

   删除操作有两种情况：
   组件新集合中有组件旧集合中的类型，但对应的element不可更新，只能执行删除
   第二种情况也就是第三点

3. 旧组件不在新集合里面，执行删除，面对换位的节点时，执行移动操作 —— MOVE_EXISTING

   优化点
   比如该层级的组件原本是 [A,B,C,D] ，新的结构为 [A,D,B,C] ，只进行了移动操作。在传统的diff算法 中，只要遇见不同（B/D）就删除并重新插入，这样的做法过于粗暴，浪费了很多可以复用的节点，所以在element diff中，对新旧该层级的对比双方都添加了唯一的key值进行区分，只要对应的key值对应的元素没有改变，则只需要执行移动即可。

细节

新旧节点会遍历后对比下标，新的下标称为lastIndex，旧的称为index，如果lastIndex大于index，需要将节点旧的节点移动到新的位置，相反则不动。

如果没有找到对应位置节点，则执行新增； 如果旧的节点在新的节点组用不到，则执行删除；一般是在最后做删除操作。

特殊情形，最后一个节点移动到第一个位置，会导致，前面的n-1个节点都进行后移，影响性能。尽量避免这样的操作。