react页面渲染中key如何影响性能？

按照react官方文档的说法：
用作key的值应该在数据中提前就准备好，而不是在运行时才随手生成。

key的作用

官方解释：
key的作用是从众多兄弟元素中唯一标识出某一项（JSX节点或文件）。
在元素位置在渲染过程中发生改变时，key值可以让react在整个生命周期一直认识它。

个人理解：
给组件赋key值可以提高react性能。
key会将react组件和数组一一对应起来，在数组进行排序、插入、删除时，会根据key值找到并修改dom树上对应的组件，如果没有key或者key动态生成，则会将组件从dom树上移除，再重新创建组件，性能会更低。

为什么不能用索引作为key值？

使用索引作为key值可能会出现在数组顶部增加一个数据，该数据按照数组排列顺序，对应的key值是0，而之前渲染的时候key值为0的组件对应的是当前更改后数组的第二个数据，react根据key将其看为同一个组件，会出现渲染数据的错误。

这里有一篇blog用举例的方式分析该问题，写的还不错，推荐阅读https://www.jianshu.com/p/6d2518cc19bc?from=singlemessage

如何设定key值？

来自数据库的数据：从数据库中获取key，例如数据表中的主键。
本地数据：自增计数器或者类似uuid的库生成key。

key需要满足的条件

key值在兄弟节点之间必须是唯一的。

key值不能改变。千万不要在渲染时动态地生成key！