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学习点滴 call、apply的区别
Oct 22 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python调用webservice接口的实现
2019/07/12 Python
keras导入weights方式
2020/06/12 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
python 如何调用远程接口
2020/09/11 Python
python中if嵌套命令实例讲解
2021/02/25 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
Java程序员面试题
2016/09/27 面试题
员工安全责任书范本
2014/07/24 职场文书
颐和园的导游词
2015/01/30 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Python音乐爬虫完美绕过反爬
2021/08/30 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android