
react中使用index作为key值会怎样?
发布日期:2021-05-20 10:07:00
浏览次数:20
分类:技术文章
本文共 1764 字,大约阅读时间需要 5 分钟。
key
写动态子组件的时候,如果没有给动态子项添加 key prop,则会报一个警告:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'App'. See https://fb.me/react-warning-keys for more information.
这个警告指的是,如果每一个子组件是一个数组或迭代器的话,那么必须有一个唯一的 key prop。
这个 key prop 究竟是做什么的呢?组件性能优化
我们想象一下,假如需要渲染一个有 5000 项的成绩排名榜单,而且每隔几秒就会更新一次
排名,其中大部分排名只是位置变了,还有少部分的是完全更新了,少部分则是清出榜单了。 此时 key 就发挥作用了,它是用来标识当前项的唯一性的 props。现在尝试来描述这一场景, 我们有一份学生的成绩数组:[{ sid: '600211', name: 'Cam', }, { sid: '600243', name: 'Arcthur', }, { sid: '600225', name: 'Echo', }] 其中,sid 是学号,name 是名字。那么,我们来实现成绩排名的榜单:import React from 'react'; function Rank({ list }) { return (
- { list.map((entry, index) => (
- {entry.name} ))}
我们把 key 设成了序号,这么做的确不会报警告了,但这是非常低效的做法。我们在生产环
境下常常犯这样的错误,这个 key 是每次用来做 Virtual DOM diff 的,每一位同学都用序号来更 新的问题是它没有和同学的唯一信息相匹配,相当于用了一个随机键,那么不论有没有相同的项, 更新都会重新渲染。 正确的做法也很简单,只需要把 key 的内容换成 sid 就可以了:import React from 'react'; function Rank({ list }) { return (
- { list.map((entry, index) => (
- {entry.name} ))}
当 key 相同时,React 会怎么渲染呢?答案是只渲染第一个相同 key 的项,且会报一个警告:
Warning: flattenChildren(…): Encountered two children with the same key, `.$a`. Child keys must be unique; when two children share a key, only the first child will be used.
因此,对 key 有一个原则,那就是独一无二,且能不用遍历或随机值就不用,除非列表内容
也并不是唯一的表示,且没有可以相匹配的属性。 关于 key,我们还需要知道的一种情况是,有两个子组件需要渲染的时候,我们没法给它们 设 key。这时需要用到 React 插件 createFragment 来解决:import React from 'react'; import createFragment from 'react-addons-create-fragment'; function Rank({ first, second }) { const children = createFragment({ first: first, second: second, }); return (
- { children}
上述代码中,first 和 second 两个 prop 的 key 就是我们设置对象的 key。
转载地址:https://blog.csdn.net/weixin_45416217/article/details/113136380 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2023年09月22日 03时51分39秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
JAVA数据结构学习(2)——泛型
2019-03-07
JAVA数据结构学习(3)——栈和队列
2019-03-07
JAVA数据结构学习(4)——树
2019-03-07
Ubuntu找不到VMware共享的文件夹
2019-03-07
Qt编程提示错误:‘QTcpSocket‘ file not found
2019-03-07
库函数之malloc与calloc
2019-03-07
库函数之malloc与new
2019-03-07
库函数之sprintf与snprintf
2019-03-07
库函数之scanf与sscanf
2019-03-07
Linux命令之lsusb
2019-03-07
嵌入式Linux开发,去掉内核kernel开机画面logo屏幕上的光标
2019-03-07
Linux,curl工具,测试web,数据流直接打印到控制平台
2019-03-07
Element-UI安装使用教程(一)
2019-03-07
Vue开发入门(一) | vue基础指令 &案例
2019-03-07
PHP开发入门(一) | php基础语法知识
2019-03-07
WebStorm 中安装并使用Element-UI(入门)
2019-03-07
Element-UI开发指南--动画和组件基础(二)
2019-03-07
Vue+Bootstrap实现商品的增删计算案例
2019-03-07
设计素材网址集合(比较全)
2019-03-07