react中设置key值的作用

在什么场景下需要设置key？

• 通常应用于列表渲染中，比如通过一个数组渲染出多个列表项时，需要对每一项设置一个唯一的key值来进行标识。

key值的作用

• 元素key属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的Diff。
• 一旦组件加上了key值，react就会在渲染时对该组件的身份进行校验，首先校验新旧组件的key值是不是一致，不一致的话，该组件直接销毁，然后在新建该组件；如果一致，则比较组件的属性是否发生变化，如果发生变化，则采用diff算法进行对比，然后得出差异对象，如果属性没发生变化，则认为该组件不需要改变

 

key值的使用

• key 应该是唯一的
• key不要使用随机值（随机数在下一次 render 时，会重新生成一个数字）
• 避免使用 index 作为 key

为什么最好不要使用index作为key？什么场景下可以使用index？

• 若数组的内容只是作为纯展示，而不涉及到数组的动态变更，其实是可以使用index作为key的。
• 如果涉及到数组的动态变更，例如数组新增元素、删除元素或者重新排序等，这时index作为key会导致展示错误的数据。
• 场景分析
  • 比如对于一个列表，点击第一项时对其进行删除，进行diff时，因为使用index作为key，每一项的文本节点改变，最后一项删除，相当于所有列表项都发生了变化，进行了重新渲染，而如果使用唯一值作为key，进行diff时仅仅是删除了一个节点，其余节点没有改变。
  • 比如向一个列表第一项插入一个元素时，由于插入导致index值的改变，同样会引起整个列表项的重新渲染，而如果使用唯一值的话，会新建一个节点，其余节点复用先前的节点。