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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
JavaScript的function函数详细介绍
Nov 20 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Linux下python制作名片示例
2018/07/20 Python
Python数据集切分实例
2018/12/08 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
python中tab键是什么意思
2020/06/18 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
期末学生评语大全
2014/04/24 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS