React中key值有何作用以及key值的用法是什么?(附代码)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React中key值有何作用以及key值的用法是什么?(附代码),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2604字,纯文字阅读大概需要4分钟。
内容图文
![React中key值有何作用以及key值的用法是什么?(附代码)](/upload/InfoBanner/zyjiaocheng/286/3ac2763d8c5140c085a5f4e9ed58c22c.jpg)
在react项目中总会遇到这样一个的坑
这是警告数组遍历子元素要有一个唯一的key值,但是key到底是什么,在代码中到底起了什么作用?
key概述
react中的key属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后,也仍无法获取这个组件的key值),而是给react自己用的。
简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。
key的使用场景
在项目开发中,key属性的使用场景最多的还是由数组动态创建的子组件的情况,需要为每个子组件添加唯一的key属性值。那会有的人就会自然而然想到,key和动态渲染的子元素获取的index位置的值很接近,那不是可以直接用index附上key的值呢key={index}?
例如: {dataList.map((item,index)=>{ return <p style={mystyle} key={index}>{item.name}</p> }) }
在你尝试过后会发现,报错没了,渲染也没问题不是很正常嘛?!但是强烈不推荐用数组index来作为key。
如果数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么视图元素都将重新渲染。
例如:
本来index=2的元素向前移动后,那该元素的key不也同样发生了改变那这样会改变的Key就没有任何的存在意义,既然是作为“身份证”一样的存在,那就不容有失。当然,在你用key值创建子组件的时候,若数组的内容只是作为纯展示,而不涉及到数组的动态变更,其实是可以使用index作为key的。
key的值必须保证唯一且稳定
我在与Key值打过几次交道过后,觉得key值就类似于数据库中的主键id一样,有且唯一。
//this.state.users内容。注意:李四和王五的id相同!!! this.state = { users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}], ....//省略 } render() return( <p> <h3>用户列表</h3> {this.state.users.map(u => <p key={u.id}>{u.id}:{u.name}</p>)} </p> ) );
注意以上范例中,动态渲染的数据中,key以数据的id来定,而李四、王五的id相同而导致Key的雷同,最后的渲染结果为张三和李四,王五并没有展示出来。主要是因为 react根据key认为李四和王五是同一个组件(李四和王五的key值相同),导致第一个被渲染,后续的会被丢弃掉。
这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件
并且,Key也要保证值的稳定性,例如:
{dataList.map((item,index)=>{ return <p style={mystyle} key={Math.random()}>{item.name}</p> }) }
尤其如以上范例中所示,key的值以Math.random()随机生成而定,这使得数组元素中的每项都重新销毁然后重新创建,有一定的性能开销;另外可能导致一些意想不到的问题出现。
所以,Key的值必须保证其唯一和稳定性
相关推荐:
如何读取redis中的key值中的结果
React Native react-navigation 导航使用详解
以上就是React中key值有何作用以及key值的用法是什么?(附代码)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的React中key值有何作用以及key值的用法是什么?(附代码)全部内容,希望文章能够帮你解决React中key值有何作用以及key值的用法是什么?(附代码)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。