文章转载自公众号 前端桃园 前端桃园 ， 作者 桃翁
我相信在看这篇文章的读者一般都已经了解过 React 16 以前的 Diff 算法了，这个算法也算是 React 跨时代或者说最有影响力的一点了，使 React 在保持了可维护性的基础上性能大大的提高，但 Diff 过程不仅不是免费的，而且对性能影响很大，有时候更新页面的时候往往 Diff 所花的时间 js 运行时间比 Rendering 和 Painting 花费更多的时间，所以我一直传达的观念是 React 或者说框架的意义是为了提高代码的可维护性，而不是为了提高性能的，现在所做的提升性能的操作，只是在可维护性的基础上对性能的优化。
目录
- Diff 简介
- 前置知识介绍
- Diff TextNode
- Diff React Element
- Diff Array
Deep In React 系列之详解 React 16 的 Diff 策略
总结
对于数组的 diff 策略，相对比较复杂，最后来梳理一下这个策略，其实还是很简单，只是看源码的时候比较难懂。
我们可以把整个过程分为三个阶段：
- 第一遍历新数组，新老数组相同 index 进行对比，通过 updateSlot 方法找到可以复用的节点，直到找到不可以复用的节点就退出循环。
- 第一遍历完之后，删除剩余的老节点，追加剩余的新节点的过程。如果是新节点已遍历完成，就将剩余的老节点批量删除；如果是老节点遍历完成仍有新节点剩余，则将新节点直接插入。
- 把所有老数组元素按 key 或 index 放 Map 里，然后遍历新数组，插入老数组的元素，这是移动的情况。