在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。
* key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。
* key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件(有状态组件的constructor和componentWillUnmount都会执行)
* key属性是添加到自定义的子组件上,而不是子组件内部的顶层的组件上
* key值的唯一是有范围的,即在数组生成的同级同类型的组件上要保持唯一,而不是所有组件的key都要保持唯一
可以用index当做key值,但是不建议,因为index不是唯一的,可以用时间戳,也可以让后端给你一个唯一的标识

React 中的key值的更多相关文章

  1. react中对于key值的理解

    1.key是用来帮助react识别哪些内容被更改.添加或者删除.key需要写在用数组渲染出来的元素内部,并且需要赋予其一个稳定的值.如果key值发生了变更,react则会触发UI的重渲染. 2.在相邻 ...

  2. Python开发【笔记】:如何在字典遍历中删除key值?

    数据遍历时不能犯傻系列 前言: 针对字典做一些操作时,有时会遇到下面的状况,列如我们需要把data中的key值根据replace中的映射关系进行替换(Caller替换为caller) data = { ...

  3. JS 遍历JSON中每个key值

    JS 遍历JSON中的每个key值,可以按键值对进行存储: var myVar = { typeA: { option1: "one", option2: "two&qu ...

  4. iOS 中plist文件中配置key值冲突的现象

    iOS开发一些特殊的软件需要在项目中配置对应的key值,然而近期在项目中发现一个有意思的现象,苹果官方文档中提供的key值很多,但其实有一些彼此可能有冲突,当你同时配置了彼此冲突的key值,可能会出现 ...

  5. FastJson 对json中的KEY值的大小写转换方法

    /** * json大写转小写 * * @return JSONObject */ public static JSONObject transToLowerObject(String json) { ...

  6. json中获取key值

    <script type="text/javascript"> getJson('age'); function getJson(key){ var jsonObj={ ...

  7. java自定义类型 作为HashMap中的Key值 (Pair<V,K>为例)

    由于是自定义类型,所以HashMap中的equals()方法和hashCode()方法都需要自定义覆盖. 不然内容相同的对象对应的hashCode会不同,无法发挥算法的正常功能,覆盖equals方法, ...

  8. 如何读取redis中的key值中的结果

    redis的值有5种类型,不同的类型有不同的命令来获取: 字符直接 get key 队列 左端弹出一个元素  LPOP key 哈希 HGET key field 集合 SMEMBERS key 返回 ...

  9. react中根据后台值动态配置

    业务中我们要实现对应的数据是1是男,2是女,这就要根据键来进行动态匹配,通常后台来给你一个1或者2,你来进行匹配,这样的数据一般在表格中比较常见. <Card title="Mock- ...

随机推荐

  1. md

    > 引用# 一级标题## 二级标题,总共六级标题 - ul + li + li 1. 1232. 456 [链接](http://www.baidu.com) ![图片](http://plac ...

  2. Flink on yarn的配置及执行

    1. 写在前面 Flink被誉为第四代大数据计算引擎组件,即可以用作基于离线分布式计算,也可以应用于实时计算.Flink可以自己搭建集群模式已提供为庞大数据的计算.但在实际应用中.都是计算hdfs上的 ...

  3. spring boot 项目打成war包部署到服务器

    这是spring boot学习的第二篇了,在上一篇已经整合了spring boot项目了,如果还有小伙伴没有看得可以先去看第一篇 基础整合spring boot项目 到这里的小伙伴应该都是会整合基本的 ...

  4. IDEA和eclipse快捷键

    软件通用的快捷键: * 保存:Ctrl + S * 剪切:Ctrl + X * 粘贴:Ctrl + V * 复制:Ctrl + C * 全选:Ctlr + A * 撤销:Ctrl + Z * 反撤销: ...

  5. 2018-2019-2 20175305实验一《Java开发环境的熟悉》实验报告

    2018-2019-2 20175305实验一<Java开发环境的熟悉>实验报告 实验题目 实验一Java开发环境的熟悉-1 1).实验目的及要求 1.建立"自己学号exp1&q ...

  6. recyclerview嵌套GridView去屏蔽后者的点击事件,而是前者响应到事件。

    无论是标题中的嵌套方式,还是其它列表控件之间的嵌套,都适用. 1.在GirdView的所在布局的根布局中设置改属性: android:descendantFocusability="blac ...

  7. BZOJ.5397.circular(随机化 贪心)

    BZOJ 感觉自己完全没做过环上选线段的问题(除了一个2-SAT),所以来具体写一写qwq. 基本完全抄自remoon的题解qwq... (下标从\(0\sim m-1\)) 拆环为链,对于原线段\( ...

  8. Python操作Excel, 开发和调用接口,发送邮件

    笔记: 上周回顾: 模块: 导入模块的顺序 lyl.py # def hhh(): pass name = 'lyl' a.py import lyl import sys from lyl impo ...

  9. 微信小程序之微信登陆 —— 微信小程序教程系列(20)

    简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...

  10. pta-树种统计

    树种统计 (25 分) 随着卫星成像技术的应用,自然资源研究机构可以识别每一棵树的种类.请编写程序帮助研究人员统计每种树的数量,计算每种树占总数的百分比. 输入格式: 输入首先给出正整数N(≤10​5 ...