在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. go time模块

    package main import ( "fmt" "time") func test() { time.Sleep(time.Millisecond * ...

  2. vim 使用学习操作

    1 跳转 命令 作用 h 光标向左移动 l 光标向右移动 j 光标向上移动 k 光标向下移动 w 移动光标到下一个单词开头. e 移动光标到下一个单词结尾 b 移动光标到上一个单词. 0 移动光标到本 ...

  3. react native 中实现个别页面禁止截屏

    这里主要用到了原生模块,下面贴出FlagSecureModule.java的代码 package com.studyproj.flagsecure; import android.util.Log; ...

  4. 002 html总结

    1.题目 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? div+css的布局较table布局有什么优点? strong与em的异同? 你能描述一下渐进增强和优雅降级之 ...

  5. pycharm中range的应用

    v = range(100) for item in v: print (item) #输出结果是0 1 2 3 ......99 这是在python3中实现的,python2中不一样 下面是一个从大 ...

  6. 2018-2019-1 20189201 《LInux内核原理与分析》第九周作业

    那一天我二十一岁,在我一生的黄金时代.我有好多奢望.我想爱,想吃,还想在一瞬间变成天上半明半暗的云.那一年我二十一岁,在我一生的黄金时代.我有好多想法.我思索,想象,我不知该如何行动,我想知道一个城市 ...

  7. 【spring】-- springboot配置全局异常处理器

    一.为什么要使用全局异常处理器? 什么是全局异常处理器? 就是把错误异常统一处理的方法. 应用场景: 1.当你使用jsr303参数校验器,如果参数校验不通过会抛异常,而且无法使用try-catch语句 ...

  8. 【C语言编程练习】5.12 兔子产仔问题

    1. 题目要求 把一对新生的兔子关在屋子里,已知一对两个月大的兔子以后买一个月可以生一对小兔子,而这一对心生的小兔子初生两个月以后才可以生小兔子,假如一年内没有死亡,一年可以繁殖成多少对? 2. 题目 ...

  9. PHP 关于判断输入日期是否合法

    合法要求 一年仅十二个月 4,6,9,11月仅30天,1,3,5,7,8,10,12月仅31天 闰年2月29天,否则28天 输入的变量年,月,日为数字 代码: <?php //PHP中判断输入的 ...

  10. Kafka 安装配置

    1. 下载安装kafka 下载地址:http://apache.fayea.com/kafka/ 解压安装包 tar zxvf kafka_版本号.tgz 2. 配置 修改kafka的config/s ...