React key值的作用和使用详解


Posted in Javascript onAugust 23, 2018

在react项目中总会遇到这样一个的坑

React key值的作用和使用详解

这是警告数组遍历子元素要有一个唯一的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 <div style={mystyle} key={index}>{item.name}</div>
    })
}

在你尝试过后会发现,报错没了,渲染也没问题不是很正常嘛?!但是强烈不推荐用数组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(
 <div>
  <h3>用户列表</h3>
  {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
 </div>
 )
);

注意以上范例中,动态渲染的数据中,key以数据的id来定,而李四、王五的id相同而导致Key的雷同,最后的渲染结果为张三和李四,王五并没有展示出来。主要是因为 react根据key认为李四和王五是同一个组件(李四和王五的key值相同),导致第一个被渲染,后续的会被丢弃掉。

这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。

并且,Key也要保证值的稳定性,例如:

{dataList.map((item,index)=>{
    return <div style={mystyle} key={Math.random()}>{item.name}</div>
    })
}

尤其如以上范例中所示,key的值以Math.random()随机生成而定,这使得数组元素中的每项都重新销毁然后重新创建,有一定的性能开销;另外可能导致一些意想不到的问题出现。

所以,Key的值必须保证其唯一和稳定性

所以,在不能使用random随机生成key时,我们可以像下面这样用一个全局的localCounter变量来添加稳定唯一的key值。

var localCounter = 1;
this.data.forEach(el=>{
el.id = localCounter++;
});
//向数组中动态添加元素时,
function createUser(user) {
return {
...user,
id: localCounter++
}
}

key其它注意事项

当然除了为数据元素生成的组件要添加key,且key要稳定且唯一之外,还需要注意以下几点:

key属性是添加到自定义的子组件上,而不是子组件内部的顶层的组件上。

//MyComponent
...
render() {//error
<div key={{item.key}}>{{item.name}}</div>
}
...

//right
<MyComponent key={{item.key}}/>

key值的唯一是有范围的,即在数组生成的同级同类型的组件上要保持唯一,而不是所有组件的key都要保持唯一

不仅仅在数组生成组件上,其他地方也可以使用key,主要是react利用key来区分组件的,相同的key表示同一个组件,react不会重新销毁创建组件实例,只可能更新;key不同,react会销毁已有的组件实例,重新创建组件新的实例。

{
this.state.type ? 
<div><Son_1/><Son_2/></div>
: <div><Son_2/><Son_1/></div>
}

例如上面代码中,this.state.type的值改变时,原Son_1和Son2组件的实例都将会被销毁,并重新创建Son_1和Son_2组件新的实例,不能继承原来的状态,其实他们只是互换了位置。为了避免这种问题,我们可以给组件加上key。

{
this.state.type ? 
<div><Son_1 key="1"/><Son_2 key="2"/></div>
: <div><Son_2 key="2" /><Son_1 key="1"/></div>
}

这样,this.state.type的值改变时,Son_1和Son2组件的实例没有重新创建,react只是将他们互换位置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 #Javascript
从零开始学习搭建React脚手架项目
Aug 23 #Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 #Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 #Javascript
JS实现的简单分页功能示例
Aug 23 #Javascript
JavaScript实用代码小技巧
Aug 23 #Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
You might like
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php除数取整示例
2014/04/24 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
给ECShop添加最新评论
2015/01/07 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
分析Python中解析构建数据知识
2018/01/20 Python
pytorch 共享参数的示例
2019/08/17 Python
Python enumerate内置库用法解析
2020/02/24 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python实现邮件循环自动发件功能
2020/09/11 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
2014年自我评价
2014/01/04 职场文书
出国留学计划书
2014/04/27 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
公司年底活动方案
2014/08/17 职场文书
汇报材料怎么写
2014/12/30 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
应聘教师求职信范文
2015/03/20 职场文书
创业计划书之书店
2019/09/10 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
win10清理dns缓存
2022/04/19 数码科技