写这篇博客的初衷是为了加深自己对该知识点的理解，同时也是记录一下自己的遇到的问题，避免自己以后再犯相同的错误。为了解释清除这个问题，接下来我们先大概了解一下 react 中的 diff 算法。
diff 的分类
tree diff（针对树结构）
- react 对两棵树进行层次比较，对第一层的比较结束，则接着比较下一层次，
- 若某一节点消失了，则该节点与其所有子节点会被完全删除,不在进行进一步比较。
component diff（针对组件结构）
- 首先判断两个组件是不是同一类型，若是同一类型，则继续比较 Dom 树，如果不是，则替换该组件下的所有子节点。
- 如果我们确切的知道组件是同一类型，并且它的虚拟dom没有变化。我们可以通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。从而节省大量的 diff 运算时间。
element diff（针对元素结构）
该 diff 算法主要是针对同一层级的节点，react 对处于同一层级的节点提供了以下三种操作
- 插入节点： 新的节点不在原来该层级的 dom 节点集合中，则执行插入操作。
- 移动节点：若某一节点在该层级原本 dom 集合中存在，并且新的dom集合中也存在，react 判断他们为同一元素，只是位置不同，则仅仅移动该节点。而 key 则是 react 判断是否为同一元素的依据。
- 删除节点：若该节点在该层级原本的 dom 集合存在，但新的 dom 集合中不存在，则删除该节点，或者该层级原本的 dom 集合存在，新的 dom 集合也存在，但react判断他们并不是同一元素，也需要在原本的集合中删除该节点。
问题起因
某次页面开发涉及到了节点的移动，但我往其中插入某个新的节点的时候，发现整个页面的数据出现了问题，经过调试，发现新建的节点虽然在页面中的位置是正确的，但它的 props 的 id 号确是页面更新前这个节点的id号。为了解释清楚出现这个问题的原因。我们先来了解一下react的中的key干了什么事情
react 中的 Key
react 中的 key 属性，它是一个特殊的属性，它之于具有该属性的组件或元素，就像是身份证对于我们人一样，是一个唯一的身份标识。一个 key 对应一个组件或者元素，具有相同的 key 的组件或元素，react 将之视为同一个组件或者元素。
了解了 key 做了什么，我们再回过头看遇到的问题。我当时遍历数组的时候，用的 key 是数组下标。
上图中绿色色块的是我们新插入的元素。色块上的数字代表 key 值，我们能很轻易的识别绿色的色块是新加入的。但 react 不这样想。它的思路是这样的。
- 灰色色块key 为 1， 更新后的灰色色块 key 也为 1，没问题，是同一个元素，然后将更新后的灰色色块 id 赋值为 1，下一位。
- 米粉色色块 key 为 2， 绿色色块 key 也为 2， 嗯？ 颜色不一样诶，没关系，key是一样的，他俩就是同一个元素。于是将绿色色块 id 赋值为 2。
... ... 以此类推 - 最后来到了最后一个元素，key 为 6 的色块没有诶, 那就在这里插入一个新的节点。然后将新建的数据赋给它，至此 over。
- 将整个层级的 dom 比较完以后的 dom 就如下图所示。
结果就是本应该在2号位的数据到了6号位。从而导致了页面数据的异常。
总结
如果当涉及到遍历的时候，页面数据异常，或者页面与预期效果实现不一致，首先考虑是不是 key 值用了索引，所以，为了养成习惯，尽量避免使用索引做 key 值吧。官方也推荐我们这样做。文章解释得还不够清楚，后面有时间在做相应的补充。
在最后，附上官网链接：https://zh-hans.reactjs.org/docs/lists-and-keys.html
