开发者社区> 问答> 正文

react 组件key的问题

当 React 校正带有 key 的子级时,它会确保它们被重新排序(而不是破坏)或者删除(而不是重用)。
务必 把 key 添加到子级数组里组件本身上,而不是每个子级内部最外层 HTML 上
这句话该怎么理解?key的作用到底是什么?原来以为就是把数据的唯一标识加在组件上就行了,但是好像不够。key到底该怎么理解呢?

展开
收起
a123456678 2016-03-12 14:00:55 2794 0
2 条回答
写回答
取消 提交回答
  • 必须保证唯一就行,如果不唯一会导致莫名奇妙的数据出现,因为被复用了。

    2019-07-17 19:00:43
    赞同 展开评论 打赏
  • 这个key应该是data-reactid有关系,这个data-reactid是react自动生成为dom-diff算法服务的,你打开react生成的html里面能看得见。添加key应该是保证react-vdom的标识唯一性,你应该发现只有添加一批完全一样的component在同一节点下才会有这个warning。
    react的diff算法,每次render的时候都会根据这个唯一标记的dom来决定是否要重新渲染这部分,以此来达到减少不需要的dom操作,提高性能的目的。你可以试一下,react的组件在update的时候性能明显好于其他框架
    你添加了一些你认为唯一性的数据但是没起到作用,很可能是数据在你不知道的地方有重复的原因
    想省事就放个index肯定可以去掉warning

    2019-07-17 19:00:43
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载