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有更深刻的认识，如有不正确的地方，欢迎指出。