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. PHP代码审计（初级篇）

    一.常见的PHP框架 1.zendframwork: (ZF)是Zend公司推出的一套PHP开发框架 功能非常的强大,是一个重量级的框架,ZF 用 100%面向对象编码实现. ZF 的组件结构独一无二 ...

  2. 分布式 and 集群

    集群是个物理形态,强调个体和群体之间的联系: 同一个业务部署在多个服务器上,形成的逻辑上的整体. 分布式是个工作方式.强调请求和处理直接的分发状况: 一个业务分拆多个子业务,部署在不同的服务器上,通过 ...

  3. python 自动打包，发送邮件(包括附件)至多个收件人（qq邮箱，163邮箱）

    -----------------------------打包部分---------------------------------- import zipfile def zipDir(dirpat ...

  4. I - Fill The Bag codeforces 1303D

    题解:注意这里的数组a中的元素,全部都是2的整数幂.然后有二进制可以拼成任意数.只要一堆2的整数幂的和大于x,x也是2的整数幂,那么那一堆2的整数幂一定可以组成x. 思路:位运算,对每一位,如果该位置 ...

  5. E1. Send Boxes to Alice (Easy Version)

    题解: 保存每个1的位置.然后记录1的总个数cnt,如果存在一个k使得这个k是每个集合的倍数,那么为了使操作次数最小,这个k应该是cnt的质因子.(因为都是每个集合的数目1,使每个集合的数目变为2需要 ...

  6. Ubuntu搭建Redis 集群

    1.源码编译 查看需要下载版本:http://download.redis.io/releases/ 本人保存路径:/usr/local/soft/ wget http://download.redi ...

  7. 引导 ARM Linux

    引导 ARM Linux 本文翻译自:https://www.kernel.org/doc/html/latest/arm/booting.html 引导 ARM Linux 需要一个引导加载程序,它 ...

  8. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

  9. scala教程之:可见性规则

    文章目录 public Protected private scoped private 和 scoped protected 和java很类似,scala也有自己的可见性规则,不同的是scala只有 ...

  10. Rust 1.31正式发布，首次引入Rust 2018新功能

    Rust 1.31是第一个实现了Rust 2018独有新功能并且不保证与现有代码库兼容的版本.Rust 2018相关工作正在进行中,而Rust 1.31只是整个三年开发周期的开始,这个开发周期将对这门 ...