key不是给开发者使用的,是给react在diff算法中使用的,diff算法会比较新旧虚拟dom,并且是同层比较,当同一层中有多个元素的时候,会比较这一层的key值,

如果key相同,属性改变积极更新属性,位置改变就移动位置,不会发生删除创建元素,(只会将旧虚拟dom的节点位置移动.)

如果key不同,就会先删除元素在创建元素.

所以我们千万不要用index,时间戳等作为key值.像我用index作为key,那假如我删除一个元素,会导致很多key都会改变.时间戳同理

react——key值的理解的更多相关文章

  1. react中对于key值的理解

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

  2. react中key值的理解

    react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建有了key属性后,就可以与组件建立了一种对应关系,react根据 ...

  3. 深入理解React key

    一 react 组件元素的 diff 算法 二 key 的理解 概述 react 中的key 属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key ...

  4. React 中的key值

    在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...

  5. 浅了解:react为何需要设定唯一key值(antd-table)

    一.React规范 1.1 react key的作用 当渲染重复数据的时候,React.diff会根据生成的key进行虚拟DOM渲染, 所以我们需要在遍历的地方都要加上key,例如map.for等等 ...

  6. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  7. react的key值的作用

    因为在reactelement中有一个属性是key,该属性默认是为空值,所以一般情况下,只要组件不加上key值,react是不会去校验组件的key,而是直接采用diff算法进行对比,一旦组件加上了ke ...

  8. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  9. react中，用key值来解决一些奇葩问题

    编辑用户信息,角色信息无法加载到值 改进之后:思路:由于值是设置在state里面的,界面编辑时,会重服务器拉去数据,值也设置在state里面了,但是CheckboxGroup依然不会去渲染选中的值, ...

随机推荐

  1. Git应用详解第九讲：Git cherry-pick与Git rebase

    前言 前情提要:Git应用详解第八讲:Git标签.别名与Git gc 这一节主要介绍git cherry-pick与git rebase的原理及使用. 一.Git cherry-pick Git ch ...

  2. Extjs入门——环境配置

    Extjs框架作为一个07年就上线的框架,虽然与现在的框架对比,显得十分臃肿.但是在针对企业内部引用系统上,它依旧能发挥出不错的效果.现在我接触到了Extjs,所以我准备写一个入门框架,简单的介绍Ex ...

  3. Docker安装Redis并介绍漂亮的可视化客户端进行操作

    1 简介 Redis是使用ANSI C语言开发的基于Key-Value的高性能NoSQL数据库,在解决高并发.高可用等一系列问题中,它扮演着重要的角色.它的优势主要有: 速度快. 持久化. 原子性. ...

  4. Git敏捷开发--stash命令

    save 执行git stash,默认以commit info保存当前的stash信息 当在某个commit下,执行多次stash时,无法友好地区分每个stash的改动.save 命令可以清晰地标识每 ...

  5. 远程登录redis

    没想到吧,我居然已经摸到了redis. 远程登录redis redis-cli -h 127.0.0.1 -p 6379 ip地址和端口记得换成自己的

  6. share sdk

    新浪微博                 http://open.weibo.com 腾讯微博                 http://dev.t.qq.com QQ空间             ...

  7. 开发机直连 Docker 中的 Redis 容器小教程

    在笔者日常开发中,都是把redis装在windows系统中.虽然可以通过RedisDesktopManager等客户端工具连接操作redis,但是还是觉得low了一些.因为作为程序员,我可能更想在Li ...

  8. sql注入notebook

    内容来自: https://ca0y1h.top/ 联合查询注入 使用场景 页面上有显示位 什么是显示位:在一个在一个网站的正常页面,服务端执行SQL语句查询数据库中的数据,客户端将数据展示在页面中, ...

  9. [转]探索 Android 内存优化方法

    前言 这篇文章的内容是我回顾和再学习 Android 内存优化的过程中整理出来的,整理的目的是让我自己对 Android 内存优化相关知识的认识更全面一些,分享的目的是希望大家也能从这些知识中得到一些 ...

  10. java之重载与重写

    重写(override) 重写是子类对父类的允许访问的方法的重新编写,方法名,返回值类型和形参列表都不能改变,唯一恩能够改变的是方法体. 重写的好处是可以根据子类的需要的行为来实现父类的方法. 重写方 ...