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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
javascript计时器详解
Feb 28 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
angular4自定义组件详解
Sep 28 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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
main.php
2006/12/09 PHP
php密码生成类实例
2014/09/24 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python查看微信好友是否删除自己
2016/12/19 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python装饰器用法示例小结
2018/02/11 Python
对Python3 序列解包详解
2019/02/16 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python numpy 反转 reverse示例
2019/12/04 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
五一服装活动方案
2014/01/11 职场文书
中青班党性分析材料
2014/02/16 职场文书
开门红主持词
2014/04/02 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
大专生求职信
2014/06/29 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书