共计 1216 个字符，预计需要花费 4 分钟才能阅读完成。
背景：
如果为父节点添加多个相同的子节点时，不添加 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 有更深入的认识，若有不正确的地方，欢迎指出。
