【react】---react中key值的作用
一、React中key值得作用
react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样。每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建
key值相同
如果两个元素是相同的key,且满足第一点元素类型相同, 若元素属性有所变化,则React只更新组件对应的属性,这种情况下,性能开销会相对较小
key值不同
在render函数执行的时候,新旧两个虚拟DOM会进行对比,如果两个元素有不同的key,那么在前后两次渲染中就会被认为是不同的元素,这时候旧的那个元素会被unmount,新的元素会被mount
//更新前
render(){
return (
<List key = '1'/>
);
}
//更新后
render(){
return (
<List key = '2'/>
);
}
二、例子
//tree1
<ul>
<li key='1'>1</li>
<li key='2'>2</li>
</ul>
//tree 2
<ul>
<li key='1'>1</li>
<li key='3'>3</li>
<li key='2'>2</li>
</ul>
如果没有key值得情况下,react并不会执行插入操作,他直接会移除原先的第二个子元素,然后再append进去剩下的子元素,而其实我们这个操作只只需要一个insert操作就能完成。为了解决这种问题,react需要我们提供给一个key来帮助更新,减少性能开销
如果有key值得情况下,react就会通过key来发现tree2的第二个元素不是原先tree1的第二个元素,原先的第二个元素被挪到下面去了,因此在操作的时候就会直接指向insert操作,来减少dom操作的性能开销
三、不推荐用属性中的index来做key值
大部分情况下我们要在执行数组遍历的时候会用index来表示元素的key。这样做其实并不是很合理。我们用key的真实目的是为了标识在前后两次渲染中元素的对应关系,防止发生不必要的更新操作。那么如果我们用index来标识key,数组在执行插入、排序等操作之后,原先的index并不再对应到原先的值,那么这个key就失去了本身的意义,并且会带来其他问题
四、注意事项
React中的key 值必须保证其唯一和稳定性
下面案例中key的值以Math.random() 随机生成而定,这使得数组元素中的每项都重新销毁然后重新创建,有一定的性能开销
{
dataList.map((item,index)=>{
return <div style={mystyle} key={Math.random()}>{item.name}</div>
})
}
【react】---react中key值的作用的更多相关文章
- vue中 key 值的作用
原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...
- json字符串中key值下划线命名转换为驼峰命名
json字符串中key值下划线命名转换为驼峰命名: 例如: 原json串: String json= "{'user_name':'ok','user_sex':0,'object_info ...
- Java集合篇六:Map中key值不可重复的测试
package com.test.collection; import java.util.HashMap; import java.util.Map; //Map中key值不可重复的测试 publi ...
- react的key值的作用
因为在reactelement中有一个属性是key,该属性默认是为空值,所以一般情况下,只要组件不加上key值,react是不会去校验组件的key,而是直接采用diff算法进行对比,一旦组件加上了ke ...
- react中key值的理解
react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建有了key属性后,就可以与组件建立了一种对应关系,react根据 ...
- STL源码中map和set中key值不能修改的实现
前言 最近正好刚刚看完,<stl源码剖析>这本书的map和set的源码部分.但是看完之后又突然发现,之前怎么没有注意到map和set容器中key不能修改是怎么实现的.故,特此整理如下. s ...
- java中key值可以重复的map:IdentityHashMap
在Java中,有一种key值可以重复的map,就是IdentityHashMap.在IdentityHashMap中,判断两个键值k1和 k2相等的条件是 k1 == k2 .在正常的Map 实现(如 ...
- React项目中的registerServiceWorker的作用
在公司的React前端项目中,发现有一个registerServiceWorker.js文件, 很久都没弄明白这个文件是干什么用的,查询了一些资料后,了解了一些 service worker是在后台运 ...
- Spring MVC-从零开始-@RequestMapping结合@PathVariable (从URL路径中取值,作用于函数参数)
1.可以直接在RequestMapping中value元素中使用{key}描述属性键 2.也可以在{key}中使用正则限定key的取值范围,从而限定url的变化范围 package com.jt; i ...
随机推荐
- MSF——Payload模块(二)
MSF系列: MSF——基本使用和Exploit模块(一) MSF——Payload模块(二) MSF——Meterpreter(三) MSF——信息收集(四) 一.exploit和payload e ...
- Ubuntu安装程序提示无法获得锁
目录 1.问题描述 2.问题原因 3.解决方案 3.1方法一:杀掉apt-get进程 3.2方法二:强制解锁 1.问题描述 E: 无法获得锁 /var/lib/dpkg/lock-frontend - ...
- spring cloud学习--eureka 01
本博客为学习使用,学习教程翟永超 spring cloud 微服务实战 搭建eureka server注册中心 spring initialize构建spring boot项目 构建网址:https: ...
- 重读ORB_SLAM之LocalMapping线程难点
1. 认清几个锁与布尔参数 线程的通信与相互影响在ORB比较复杂,需要好好缕清思路. 1.1 mbStopRequested,由RequestStop函数设定,主要是在回环线程里,在运行全局优化时,以 ...
- koa2入门笔记
[TOC] 一 什么是koa koa是基于nodejs的web框架, 是一个中间件框架. 二 中间件 Koa 中间件是简单的函数,它是带有 (ctx, next)形参 的函数. 可以采用两种不同的方法 ...
- 如何将自己的代码上传至github
前提条件: 有个github账号,电脑安装了git; 首先在自己的账号里新建一个仓库: https://github.com/qiqi105/littleAlbum.git 进入到你要上传的文件夹内部 ...
- Bata冲刺第三天
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...
- 前端学习(三十一)canvas(笔记)
canvas 画布 画图.做动画.做游戏=========================================== canvas就是新标签 必须获取绘图 ...
- H3C F100-S-G2接口配置
网络环境简单一台F100-S-G2(192.168.1.197),一台S3600,三台服务器(同一网段192.168.1~3),实现互通. 其他都不用说了配置成同一网段地址就行,主要说一下F100配置 ...
- Python自动补全缩写意义
自动补全的变量的类别p:parameter 参数 m:method 方法(类实例方法)调用方式classA aa.method()或者classA().method() c:class 类 v:var ...