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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
checkbox使用示例
Aug 23 Javascript
php跨域调用json的例子
Nov 13 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
javascript实现简易的计算器
Jan 17 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
详解Vue的sync修饰符
May 15 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
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Python splitlines使用技巧
2008/09/06 Python
有趣的python小程序分享
2017/12/05 Python
Python模块搜索路径代码详解
2018/01/29 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
python str字符串转uuid实例
2020/03/03 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
两年的个人工作自我评价
2014/01/10 职场文书
好邻里事迹材料
2014/01/16 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
副董事长岗位职责
2014/04/02 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
职业规划实施方案
2014/06/10 职场文书
部队2014年终工作总结
2014/11/27 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书