在开发react程序时我们经常会遇到这样的警告，然后就会想到：哦！循环子组件忘记加key了～

出于方便，有时候会不假思索的使用循环的索引作为key，但是这样真的好吗？什么样的值才是key的最佳选择？

为了弄明白，本文将从三个方面来分析"key"：

1.为什么要使用key

2.使用index做key存在的问题

3.正确的选择key

# 1.为什么要使用key

react官方文档是这样描述key的：

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

react的diff算法是把key当成唯一id然后比对组件的value来确定是否需要更新的，所以如果没有key，react将不会知道该如何更新组件。

你不传key也能用是因为react检测到子组件没有key后，会默认将数组的索引作为key。

react根据key来决定是销毁重新创建组件还是更新组件，原则是：

• key相同，组件有所变化，react会只更新组件对应变化的属性。
• key不同，组件会销毁之前的组件，将整个组件重新渲染。

# 2.使用index做key存在的问题

# 2.1 受控组件

单纯的展示组件比如span，这些组件是受控组件，意味着他们的值将是我们给定好的。

如果子组件只是受控组件，使用index作为key，可能表面上不会有什么问题，实际上性能会受很大的影响。例如下面的代码：

// ['张三','李四','王五']=>
<ul>
    <li key="0">张三</li>
    <li key="1">李四</li>
    <li key="2">王五</li>
</ul>
// 数组重排 -> ['王五','张三','李四'] =>
<ul>
    <li key="0">王五</li>
    <li key="1">张三</li>
    <li key="2">李四</li>
</ul>

当元素数据源的顺序发生改变时，对应的：

key为0，1，2的组件都发生了变化，三个子组件都会被重新渲染。（这里的重新渲染不是销毁，因为key还在）

相反，我们使用唯一id作为key：

// ['张三','李四','王五']=>
<ul>
    <li key="000">张三</li>
    <li key="111">李四</li>
    <li key="222">王五</li>
</ul>
// 数组重排 -> ['王五','张三','李四'] =>
<ul>
    <li key="222">王五</