另外，还有一种比较常见的场景：为一个有复杂繁琐逻辑的组件添加key后，后续操作可以改变该组件的key属性值，从而达到先销毁之前的组件，再重新创建该组件。
key的最佳实践
上面说到了，由数组创建的子组件必须有key属性，否则的话你可能见到下面这样的warning：
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ServiceInfo`. See https://fb.me/react-warning-keys for more information.
可能你会发现，这只是warning而不是error，它不是强制性的，为什么react不强制要求用key而报error呢？其实是强制要求的，只不过react为按要求来默认上帮我们做了，它是以数组的index作为key的。
index作为key是一种反模式
在list数组中，用key来标识数组创建子组件时，若数组的内容只是作为纯展示，而不涉及到数组的动态变更，其实是可以使用index作为key的。
但是，若涉及到数组的动态变更，例如数组新增元素、删除元素或者重新排序等，这时index作为key会导致展示错误的数据。本文开始引入的例子就是最好的证明。
{this.state.data.map((v,idx)=><Item key={idx} v={v} />)} // 开始时：['a','b','c']=> <ul> <li key="0">a <input type="text"/></li> <li key="1">b <input type="text"/></li> <li key="2">c <input type="text"/></li> </ul> // 数组重排 -> ['c','b','a'] => <ul> <li key="0">c <input type="text"/></li> <li key="1">b <input type="text"/></li> <li key="2">a <input type="text"/></li> </ul>
上面实例中在数组重新排序后，key对应的实例都没有销毁，而是重新更新。具体更新过程我们拿key=0的元素来说明， 数组重新排序后：
组件重新render得到新的虚拟dom；
新老两个虚拟dom进行diff，新老版的都有key=0的组件，react认为同一个组件，则只可能更新组件；
然后比较其children，发现内容的文本内容不同（由a--->c)，而input组件并没有变化，这时触发组件的componentWillReceiveProps方法，从而更新其子组件文本内容;
因为组件的children中input组件没有变化，其又与父组件传入的任props没有关联，所以input组件不会更新(即其componentWillReceiveProps方法不会被执行)，导致用户输入的值不会变化。
这就是index作为key存在的问题，所以不要使用index作为key。
key的值要稳定唯一
在数组中生成的每项都要有key属性，并且key的值是一个永久且唯一的值，即稳定唯一。
在理想情况下，在循环一个对象数组时，数组的每一项都会有用于区分其他项的一个键值，相当数据库中主键。这样就可以用该属性值作为key值。但是一般情况下可能是没有这个属性值的，这时就需要我们自己保证。
但是，需要指出的一点是，我们在保证数组每项的唯一的标识时，还需要保证其值的稳定性，不能经常改变。例如下面代码：
{ this.state.data.map(el=><MyComponent key={Math.random()}/>) }
上面代码中中MyComponent的key值是用Math.random随机生成的，虽然能够保持其唯一性，但是它的值是随机而不是稳定的，在数组动态改变时会导致数组元素中的每项都重新销毁然后重新创建，有一定的性能开销；另外可能导致一些意想不到的问题出现。所以：
key的值要保持稳定且唯一，不能使用random来生成key的值。
所以，在不能使用random随机生成key时，我们可以像下面这样用一个全局的localCounter变量来添加稳定唯一的key值。
var localCounter = 1; this.data.forEach(el=>{ el.id = localCounter++; }); //向数组中动态添加元素时， function createUser(user) { return { ...user, id: localCounter++ } }
key其它注意事项
当然除了为数据元素生成的组件要添加key，且key要稳定且唯一之外，还需要注意以下几点：
key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上。
//MyComponent ... render() {//error <div key={{item.key}}>{{item.name}}</div> } ... //right <MyComponent key={{item.key}}/>
key值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的key都要保持唯一