javascript - react 组件key的问题

Question

当 React 校正带有 key 的子级时，它会确保它们被重新排序（而不是破坏）或者删除（而不是重用）。
务必 把 key 添加到子级数组里组件本身上，而不是每个子级内部最外层 HTML 上

这句话该怎么理解？key的作用到底是什么？原来以为就是把数据的唯一标识加在组件上就行了，但是好像不够。key到底该怎么理解呢？

Answer 1

这个key应该是data-reactid有关系，这个data-reactid是react自动生成为dom-diff算法服务的，你打开react生成的html里面能看得见。添加key应该是保证react-vdom的标识唯一性，你应该发现只有添加一批完全一样的component在同一节点下才会有这个warning。
react的diff算法，每次render的时候都会根据这个唯一标记的dom来决定是否要重新渲染这部分，以此来达到减少不需要的dom操作，提高性能的目的。你可以试一下，react的组件在update的时候性能明显好于其他框架

你添加了一些你认为唯一性的数据但是没起到作用，很可能是数据在你不知道的地方有重复的原因
想省事就放个index肯定可以去掉warning

Answer 2

用来做diff时用的，通过循环渲染数组时不要使用index来做key的值，会是react渲染出错。

Answer 3

简单来说data-reactid是react的做diff的关键，决定以怎样的姿势来从v-dom到dom的渲染。

不加 key react会提示warning而已，并不会报错。 如果报错了，肯定是代码哪里有问题。 warning不是报错。可以忽略的。
但是不加key会影响react渲染的性能，比如可能把这部分dom del一遍在添加，言外之意是diff算法起不了作用啦。

key不能复制id，而应该复制所以。 比如在循环上就 key={i}