react渲染列表中的key的作用

这个key首先是只在渲染数组列表的时候会用到。

比如经常遇到的

 如上

没有key的话，会报一个错，那么，我们可不可以使用数组的index作为下标呢？

答案是不推荐。因为在数组项的顺序在插入、删除或者重新排序等操作中会发生改变，此时把索引作为key可能会产生一些微妙的bug。

像下面这种纯div渲染列表是没有问题的，用index作为key

它的列表item是div，纯渲染

 我们再来看看如果列表是非受控元素的情况,把代码改造下

点击事件会触发组件重新渲染

可以看到，列表渲染出问题了，分析一下这种情况。

setState导致render，div的index不变，所以div不会重新生成，input不受state和props的控制，因此元素的状态不变，所以变化的只有受state影响的上面的{item}。

这里其实也揭露了一个问题，那就是当key变化的时候，元素会销毁重建，若key不变，则进行更新。

再用通俗的话来说，react会借助key来判断元素是最新创建的还是移动出来的，从而减少不必要的元素渲染（不必要的diff）。key属性帮助react识别唯一的组件，从而可以更高效地更新和重新渲染，key属性有助于确保组件的唯一性，是组件能够正确被复用。

注意，这里还和虚拟dom扯上关系了，要想真正了解key的作用，必须得理解react的虚拟dom以及diff。

　　这里先介绍一下vdom，react组件render产生vdom，然后渲染器把vdom渲染出来。state更新的时候，组件会重新render，产生新的vdom，在浏览器平台下，为了减少dom的创建，react会对两次的render结果做diff，尽量复用dom，提高性能。这就是vdom的来由。

　　所以key的真正作用，就是在diff过程中，新旧虚拟dom节点，使用key进行对比，而key是保存在一个map里面，使用映射能够很快的找到哪些节点是复用，哪些节点是删除还是新增，速度非常快。比虚拟dom节点全部对比一遍速度要快的多。这就是key最直观的作用，加快diff的性能。