react中key值的添加

回想下，当我们在react开发中是不是经常写下面的代码

const data = [a, b, c];
{
  data.map((item,index)=>{
    return 
item 
  })
}

当我们通过数组来动态渲染一批组件时，react要求我们必须为每一个组件添加一个唯一的key值，不然就会在控制台出现如下warning：warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.。
如果添加的key值有重复，那么重复的组件只会渲染出一个，并且react给出提示 ：Child keys must be unique; when two children share a key, only the first child will be used.
添加key值需要遵循：

1. 必需性
   key值在react中的用途可大呢，diff时根据开发者添加的key来判断新旧组件是否为同一个组件，进而决定是执行insert、remove、move操作，而这将影响页面渲染的速度和性能。至于为什么key这么重要，控制台不是报错而是警告呢？因为你实在不加key的情况，react默认取遍历的index。
2. 唯一性
   key值只需要在同一次map中保证唯一。
   react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。
3. 稳定性
   不要用index作为组件的key，index并不能唯一的标识一个组件。如果只是单纯的用作展示，到还可以。但若涉及到新增、删除元素或者重新排序时，就可能出现问题。有位大神举的例子可以很好的阐述这个问题，我就直接引用下
   文章开头的例子，渲染出的结构如下

  
a 
  
b 
  
c 

依次在三个input中输入1、2、3

image1.png

增加一条数据data = [g, a, b, c]后，渲染结构如下

  
g 
  
a 
  
b 
  
c 

页面结果：

image2.png

与我们期望的结果并不一致，为什么input框内的值错位了呢
上面实例中在数组新增后，前三个key对应的实例都没有销毁，而是重新更新。具体更新过程我们拿key=0的元素来说明， 数组新增后：

• 组件重新render得到新的虚拟dom；
• 新老两个虚拟dom进行diff，新老版的都有key=0的组件，react认为同一个组件，则只可能更新组件；
• 然后比较其children，发现内容的文本内容不同（由a--->c)，而input组件并没有变化，这时触发组件的componentWillReceiveProps方法，从而更新其子组件文本内容;
• 因为组件的children中input组件没有变化，其又与父组件传入的新props没有关联，所以input组件不会更新(即其componentWillReceiveProps方法不会被执行)，导致用户输入的值不会变化。
  这就是index作为key存在的问题，所以不要使用index作为key。
  也不能用Math.random()生成key值，这样虽然能保证key值的唯一性，但是会导致数组每次改变时，组件都重新销毁并新建，耗费性能。还可能导致一些意想不到的问题。

参考文献

React之key详解