在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. 记一次完整的asp.net-mvc页面优化过程

    最近在重构一个以前团队开发留下的MVC项目,项目结构堪称混乱,问题多多,但今天说的是页面打开速度的问题.项目中包括web后台系统,几乎随便点一个页面都要盯着白屏等待2-5秒之久,体验很差.通过对页面性 ...

  2. 记忆（缓存）函数返回值：Python 实现

    对于经常调用的函数,特别是递归函数或计算密集的函数,记忆(缓存)返回值可以显着提高性能.而在 Python 里,可以使用字典来完成. 例子:斐波那契数列 下面这个计算斐波那契数列的函数 fib() 具 ...

  3. web.xml中Servlet3.1版本的头信息格式

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  4. pycharm的list中clear的应用

    #清空的意思 li = [11,22,33,44] li.clear() print(li) #输出[],就是把列表清空

  5. 逆向分析一款国外Blackjack Card Counter软件并附上License生成脚本

    没有学过逆向,一时兴起,搞了一下这个小软件,名为“逆向分析”,其实过程非常简单,难登大雅之堂,就当段子看吧.首先介绍一下背景吧.这是一款国外的Blackjack也就是21点算牌软件,我从来不玩牌的,机 ...

  6. Codeforces 1144F Graph Without Long Directed Paths (DFS染色+构造)

    <题目链接> 题目大意:给定一个无向图,该无向图不含自环,且无重边.现在要你将这个无向图定向,使得不存在任何一条路径长度大于等于2.然后根输入边的顺序,输出构造的有向图.如果构造的边与输入 ...

  7. Win10家庭版WindowsUpdate属性为灰色

    一般的取消Windows更新只需要打开任务管理器,点击服务 然后点击左下角的打开服务 找到WindowsUpdate,右键属性 按照正常的电脑只要在启动类型中选择禁用,然后在恢复里的第一次操作选择无操 ...

  8. 图解CSS3核心技术与案例实战（1）

    前言: 我买了一本<图解CSS3核心技术与案例实战>大漠写的,为了提高自己的自觉性呢,抓紧看书,把读书笔记放在这上面,跟大家一起分享,也为督促自己完成读书计划. 文末有微信公众号,感谢你的 ...

  9. 04flask_scripts使用

    1,flask_script作用 flask_script的作用是可以通过命令行的实行来操作Flask,例如通过命令跑一个开发版本的服务器,设置数据库,定时任务等, 我们把脚本命令代码放在一个叫做ma ...

  10. VB6进行GZIP解压&C#进行GZIP压缩和解压

    VB进行GZIP解压的,DLL是系统的,如果没有 [点击下载] Option Explicit 'GZIP API '----------------------------------------- ...