react key的作用
react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。
简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,
相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。例如下面代码:
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>
)
);
上面代码在dom渲染挂载后,用户列表只有张三
和李四
两个用户,王五
并没有展示处理,主要是因为react根据key认为李四
和王五
是同一个组件,导致第一个被渲染,后续的会被丢弃掉。
index作为key是一种反模式
在list数组中,用key来标识数组创建子组件时,若数组的内容只是作为纯展示,而不涉及到数组的动态变更,其实是可以使用index
作为key的。
但是,若涉及到数组的动态变更,例如数组新增元素、删除元素或者重新排序等,这时index作为key会导致展示错误的数据。本文开始引入的例子就是最好的证明。
{this.state.data.map((v,idx)=><Item key={idx} v={v} />)}
// 开始时:['a','b','c']=>
<ul>
<li key="0">a <input type="text"/></li>
<li key="1">b <input type="text"/></li>
<li key="2">c <input type="text"/></li>
</ul>
// 数组重排 -> ['c','b','a'] =>
<ul>
<li key="0">c <input type="text"/></li>
<li key="1">b <input type="text"/></li>
<li key="2">a <input type="text"/></li>
</ul>
key的值要稳定唯一
在数组中生成的每项都要有key属性,并且key的值是一个永久且唯一的值
,即稳定唯一。
在理想情况下,在循环一个对象数组时,数组的每一项都会有用于区分其他项的一个键值,相当数据库中主键。这样就可以用该属性值作为key值。但是一般情况下可能是没有这个属性值的,这时就需要我们自己保证。
但是,需要指出的一点是,我们在保证数组每项的唯一的标识时,还需要保证其值的稳定性,不能经常改变
var localCounter = 1;
this.data.forEach(el=>{
el.id = localCounter++;
});
//向数组中动态添加元素时,
function createUser(user) {
return {
...user,
id: localCounter++
}
}
react key的作用的更多相关文章
- vue中:key 和react 中key={} 的作用,以及ref的特性?
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- React key究竟有什么作用?深入源码不背概念,五个问题刷新你对于key的认知
壹 ❀ 引 我在[react]什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行一文中介绍了react对于fiber处理的协调与提交两个阶段,而在介绍协调时 ...
- (转)Vue种key的作用
https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...
- 图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法
其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...
- 深入理解React key
一 react 组件元素的 diff 算法 二 key 的理解 概述 react 中的key 属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key ...
- vue中key的作用 v-for里警告 v-if的复用
vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...
- Vue中使用key的作用
key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...
- vue key的作用
key的作用是什么? 简单来说: key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点. 1. 更准确 因为带key就不是就地复用了,在sa ...
- v-for中的key的使用【key的作用主要是是为了高效的更新虚拟DOM】
vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用 ...
随机推荐
- POJ-3041 Asteroids,二分匹配解决棋盘问题。
Asteroids Time Limit: 1000MS Memory Limit: 65536K Description Bessie wants to navigate her s ...
- Light oj-1100 - Again Array Queries,又是这个题,上次那个题用的线段树,这题差点就陷坑里了,简单的抽屉原理加暴力就可以了,真是坑~~
1100 - Again Array Queries ...
- Chrome new features
Chrome new features copy fetch url fetch("http://10.1.5.202/deploy/http/send/svnuser", { & ...
- PowerDesigner物理模型用法总结
1. 生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本. 在Options选项卡里,可以 ...
- 详解SpringBoot集成jsp(附源码)+遇到的坑
本文介绍了SpringBoot集成jsp(附源码)+遇到的坑 ,分享给大家 1.大体步骤 (1)创建Maven web project: (2)在pom.xml文件添加依赖: (3)配置applica ...
- 2018/2/18 SpringCloud Eureka的学习和spirng ribbon的部分源码追踪
昨天对于Eurake大致做了一个介绍,今天就来说说具体怎么配置和使用吧. 首先,我们创建一个服务注册中心 这是它的配置文件 注意,因为我等下还会弄一个Eureka注册中心,所以这里service-ur ...
- 2015山东信息学夏令营 Day5T3 路径
问题描述: 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. 输入: 第一行包含一个正整数n,表示点数. 接下来 ...
- kill杀死进程方法
查找进程:ps -ef | grep firefox kill -s 9 1827
- python实现同服站点地址获取
说明:程序使用http://s.tool.chinaz.com/same此站点查询的结果.使用python简单的实现抓取结果 先随便查询一个结果,抓包分析,如图: 使用python模仿post表单,使 ...
- create-react-app 引入 antd 及 解决 antd 样式无法显示的bug
方案一: npm run eject 暴露所有内建的配置 安装组件库 yarn add antd babel-plugin-import 根目录下新建.roadhogrc文件(别忘了前面的点,这是ro ...