React进阶篇（三）diff算法（带Vue patch对比）

如何计算Virtual Dom中真正变化的部分，这就需要diff算法。

Virtual Dom配合高效的diff算法，才能够快速的渲染改动的页面，而不会渲染整个页面。

1. 跨层级移动

策略：针对节点进行比较。不同层级的节点，只有创建和删除操作。

影响性能操作，建议不要进行DOM 节点跨层级的操作。

图示如下（create A →create B →create C →delete A）：

image

2. 同层级父节点移动

策略：

1. 同类型组件：通过 shouldComponentUpdate() 来判断该组件是否需要进行diff 算法分析（所以可以利用shouldComponentUpdate()来优化组件性能）
2. 不同类型组件：直接判断为dirty component，从而替换整个组件下的所有子节点

图示如下：

image

3. 同层级子节点移动

其提供三种操作方法：

• INSERT_MARKUP：新的组件类型不在旧集合里，即全新的节点，需要对新节点执行插入操作
• MOVE_EXISTING：旧集合中有新组件类型，且element 是可更新的类型generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的DOM 节点。
• REMOVE_NODE：旧组件类型，在新集合里也有，但对应的element 不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作。

注意：对于同一层级的一组子节点，它们可以通过唯一 id 进行区分（这就是为什么在批量创建同类型组件时需要添加key属性，并且建议将key定义为有意义的唯一标示，而不是index索引）。

对于列表节点顺序的调整其实也类似于插入或删除，如下图，从 shape5 转换到 shape6。

diff.png

即将同一层的节点位置进行调整。如果未提供 key，那么 React 认为 B 和 C 之后的对应位置组件类型不同，因此完全删除后重建。

Vue的patch算法如何处理子节点数组？

Vue在处理children数组时，会循环遍历newChildren（新列表），每循环到一个子节点，就去 > oldChildern（旧列表）中找和当前节点相同的那个旧子节点。

• 如果在 oldChildern中找不到，就说明是新增节点，进行插入操作。
• 如果找到了，就做更新操作；
• 如果找到的旧节点和新节点位置不同，就需要移动旧节点。
• 最后，oldChildern未被匹配到的节点会被删除。

Vue渲染列表时，如果提供key属性，那么，可以作为节点的唯一标识。那么在oldChildern中找相同节点时，可以直接通过key获取节点，无需通过循环来查找节点。

可见，Vue和React对于key的使用并不相同