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 Timing
Apr 21 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
nuxt引入组件和公共样式的操作
Nov 05 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与XML的PDF文档生成技术
2006/10/09 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
javascript操作cookie
2017/01/17 Javascript
HTML的select控件美化
2017/03/27 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python设计模式之抽象工厂模式
2016/08/25 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
房地产开发计划书
2014/01/10 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
父亲节活动总结
2015/02/12 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python