持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

背景

在React中，列表输出元素时，如果没有添加Key属性,在开发环境中都会报出一个警告，要求加上Key属性，那么Key属性到底有什么用呢？

Key的作用

我们知道组件重新渲染时，会拿原先的虚拟DOM和新的虚拟DOM进行对比，找出不一样的地方进行重新渲染。Key的作用就是给这组元素分别加上一个唯一的标识，组件更新之后根据这个标识进行对比。具体规则就是在旧的虚拟DOM中找到Key为1的元素，和新的虚拟DOM中key为1的元素进行差异对比。所以要注意两个原则：

同一个元素跟新前后要保持key统一，也就是说元素A跟新前key为1，更新后key也要为1。
一组元素中key值不能重复。

Key的取值以及性能分析

根据上面两个原则，key该怎么取值也就很清晰了：

默认不加key时，React会以数组的索引来做每一项的key值。
当列表元素跟新前后，其顺序绝对不会发生变化时，也可以使用数组索引来做key值。
当列表元素的顺序会发生变化时，一定不要使用数组的索引，最好使用数据的id。 举个栗子：
现有一个数组[{id:1,name:'静静'},{id:2,name:'小明'},{id:3,name:'丽丽'}]，根据这个数组生成一个列表，并使用索引值作为每一项的key值，会生成下列结构：

<ul>
  <li key='0'>静静</li>
  <li key='1'>小明</li>
  <li key='2'>丽丽</li>
</ul>

这时加一个操作删除第二项{id:2,name:'小明'}，然后更新组件，就会生成新的结构：

<ul>
  <li key='0'>静静</li>
  <li key='1'>丽丽</li>
</ul>

在这个操作中，可以发现组件更新前后，丽丽key值发生了变化，那么React这时会做什么操作呢？
对比key=0的li,发现无变化不需要重新渲染；
对比key=1的li,发现前后内容不一样，重新渲染；
对比key=2的li,发现新结构中没有这项，然后删除key=2的li。
这个过程中，进行了两步操作，重新渲染了一个li和删除了一个li。
我们使用数据的id作为值再来看一下：
更新前的列表：

<ul>
  <li key='1'>静静</li>
  <li key='2'>小明</li>
  <li key='3'>丽丽</li>
</ul>

更新后的列表：

<ul>
  <li key='1'>静静</li>
  <li key='3'>丽丽</li>
</ul>

分析一波这个操作的过程：
对比key=1的li,发现无变化不需要渲染;
对比key=2的li,发现新结构中没有这项，然后删除key=2的li;
对比key=3的li,发现无变化不需要重新渲染；
这个过程中只进行了一步操作就是删除key=2的li,这样性能就会比前一种性能好一些，上面的栗子是数据比较小，当数据量大的时候，差异会更加明显。

总结

以后在做列表渲染的时候，一定要正确添加key值，这样可以使程序获得更高的性能。
比如：
列表中的key值用数据的id而不是数组的index或者key。

React中Key的作用、如何取值和取值时的性能分析

背景

Key的作用

Key的取值以及性能分析

总结