react中key的作用

背景：

如果为父节点添加多个相同的子节点时，不添加key属性，会报错但同时也会渲染出dom，渲染出dom其实是证明能从差异对象中渲染出真实dom，但报错的原因是因为这种写法会影响渲染的性能，不利于生层dom节点。

作用：

key的作用主要是用来减少没必要的diff算法对比，因为对于一个组件或者节点来说，只要父节点状态或者属性发生变化，该组件就会进行diff对比，即使该组件没变化，而如果为组件引入了key值，就可以在diff对比前先做一个校验，判断该组件是否需要diff对比，即使是diff对比，也可以判断该组件是直接更新操作还是销毁或者新建操作，从而提高了diff算法的效率；

特别在渲染同级同结构的组件们时，key可以为它们加上了身份的标志，在rerender时，可以通过key来判断该组件是否已经存在，是否需要跟新或者销毁，新建等操作，提高了diff算法在同级节点上的操作。

原理：

因为在reactelement中有一个属性是key，该属性默认是为空值，所以一般情况下，只要组件不加上key值，react是不会去校验组件的key，而是直接采用diff算法进行对比，一旦组件加上了key值，react就会在渲染时对该组件的身份进行校验，首先校验新旧组件的key值是不是一致，不一致的话，该组件直接销毁，然后在新建该组件；如果一致，则比较组件的属性是否发生变化，如果发生变化，则采用diff算法进行对比，然后得出差异对象，如果属性没发生变化，则认为该组件不需要改变；

大概的流程图：

• key相同：若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。
• key值不同：则react先销毁该组件，然后重新创建该组件。

用法：

（一般同级同结构的子节点都需要采用key属性，方便diff算法的使用）

• 纯静态的同级同结构节点的渲染，可以采用index作为key的值，因为这里不需要动态去变化节点里面的内容的值；
• 对于一组动态变化的数组来说，采用index作为key的值，会有可能出现问题，因为index的值和数组内的元素内容不具有关联性，所以即使采用了index作为key，子组件的内容有可能不会随着属性的变化而发生变化（只要组件内该元素不与属性构成联系），所以一般采用数组中元素的某一个唯一值作为key，这样一来，只要统一位置的节点的key值不一致，就会直接销毁和新建而不是直接更新；
• 对于一个不想受到父组件属性状态影响而导致没必要的渲染的组件，可以采用key值，因为只要key值不发生改变，组件的属性不变，即使父组件渲染，该组件也不会发生变化，只有组件的状态或者属性发生变化，组件才会二次渲染；一旦key值变化，就直接组件销毁然后再新建该组件。

以上就是我对react中key的认识和了解，虽然没有过多的深入研究react里面关于key的源码分析，但通过这篇博客，也会一定程度上对react的key有更深入的认识，若有不正确的地方，欢迎指出。