首页 > react 组件key的问题

react 组件key的问题

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

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


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

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


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


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

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

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

【热门文章】
【热门文章】