【react】react中key值的作用

背景

在react开发中，如果要添加多个相同的节点，那一定要为节点添加key值，且key值一定是唯一的。这是因为react利用key来识别组件，它是一种身份标识。有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。

如果不添加key值，页面会正常渲染但也会报错，正常渲染是因为react会通过diff算法比较dom的差异，报错是因为这种写法会影响渲染的性能。

key值的作用

对于同一层级的一组节点，可以通过key值唯一标识它们，提高dom更新效率

不推荐用属性中的index来做key值

我们用key的真实目的是为了标识在前后两次渲染中元素的对应关系，防止发生不必要的更新操作。那么如果我们用index来标识key，数组在执行插入、排序等操作之后，原先的index并不再对应到原先的值，那么这个key就失去了本身的意义，并且会带来其他问题

例如：数组a=[‘a’,’b’,’c’]；这个时候原先的0对应的是’a’，1对应的是’b’,依次…,如果我们对数组最前面添加了一个’d’，那么这个时候0就对应成了’d’,1变成了’a’……。这样.react会根据key来比对,发现全部都发生了变化,然后react会一个一个的卸载然后在渲染.会严重影响性能.而且有可能引起出现渲染bug