在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. Flink on yarn的配置及执行

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

  2. ASP.NET Core快速入门学习笔记（第1章：介绍与引入）

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍 任务2:环境安装 下载地址:https://dotnet.m ...

  3. sql server使用sql语句上传Excel到数据库

    USE pro GO SELECT  * INTO   temp_budget_price@201704170950 FROM    OPENDATASOURCE('Microsoft.Jet.OLE ...

  4. Tencent Cloud 腾讯云上部署 EMR Cluster + Kafka + Confluent (Schema-Registry)

    腾讯云上有些操作比起 Amazon AWS 还是很方便的, 尤其部署EMR Cluster,下面详细介绍步骤:

  5. Android- APP 秒开

    Android- APP 秒开 1. 启动APP 时白屏或者黑屏 现象:当启动APP 时,会有一个白屏或者黑屏一闪而过,然后才会显示出主界面. 这是因为,我们新打开一个应用,系统会为这个应用创建一个进 ...

  6. BZOJ.4500.矩阵(差分约束 SPFA判负环 / 带权并查集)

    BZOJ 差分约束: 我是谁,差分约束是啥,这是哪 太真实了= = 插个广告:这里有差分约束详解. 记\(r_i\)为第\(i\)行整体加了多少的权值,\(c_i\)为第\(i\)列整体加了多少权值, ...

  7. Git提交代码（要有GitHub账号）

    分享一下Git提交模式代码(只是提交到GitHub仓库而已,没有其他的操作) 这个的前提是你已经安装了Node.js.Git 下面来看: 1.  cd进入目录 2.  把当前目录变成git可以管理的仓 ...

  8. springmvc是如何工作的

    上图便是springmvc的工作流程,看着条条框框的,其实说的直白一点,springmvc就是负责处理用户的需求(request/url),它的负责人(核心组件)就是前端控制器(DispatcherS ...

  9. PeopleSoft OLE Automation error in Workbooks.Open: ObjectDoMethod: Microsoft Excel 不能访问文件

    os: WinServer 2012 R2 64位 问题描述:PeopleSoft Web端运行AE 报上图错误,AD工具直接Test正常 解决方案: 运行> dcomcnfg 这将打开组件服务 ...

  10. es6的基本数据详解

    一.Set 基本用法:   1)ES6提供了新的数据机构-Set. 它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. 先来看一段最简单的代码: 1 ...