react循环key值_原来React里的key这么有用！

相信React用户在撸代码的日常中，一定遇到过这个报错：

React中常见的未设置唯一key的报错

嗯，没错了，熟悉的配方，熟悉的报错～ 有些小伙伴看到是「Warning」也就置之不理了，有些凭经验反手给元素加上一个 key={唯一的值} 属性就迅速解决这个报错了。

不知道有多少小伙伴知道为什么React这么看重这个 key 属性，反正我以前凭直觉添加个唯一的id，再不济用索引就完事了。今天才明白，原来 key 这么有用，而且用好了还能避免性能问题甚至是 Bug ！

Key 为何而来？

在正式开始解释 key 属性之前，我得先说说React的Diffing算法。为了避免本文重心偏离及篇幅太长（喂喂喂现在篇幅也已经够长了喔 ，而且说得好像我能解释清楚Diffing算法一样 ️），我打算概括性地介绍一下这个过程：

首先检查根元素的类型。

1. 如果类型不一样，则卸载整个旧的DOM树，并重建新的DOM树。
2. 如果类型一样，React会检查两者的属性。如果属性有改变，就更新相应的属性。
3. 在比较完该节点后，递归地检查其