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. ClassLoader类加载器浅见

    类加载器 类加载器,它拿到.class文件,它会把他拆成两部分,将static数据转换成方法区的数据结构,然后把他放在了方法区之中. 然后在堆里面建一个类对象(Class,它可以用来实例化对象),然后 ...

  2. AJ学IOS 之ipad开发Popover的基本使用

    AJ分享,必须精品 一:效果图 二:注意 对于方法[UIPopoverController dealloc] reached while popover is still visible. 当popo ...

  3. F - Bone Collector

    Many years ago , in Teddy’s hometown there was a man who was called “Bone Collector”. This man like ...

  4. 用pytorch做手写数字识别，识别l率达97.8%

    pytorch做手写数字识别 效果如下: 工程目录如下 第一步  数据获取 下载MNIST库,这个库在网上,执行下面代码自动下载到当前data文件夹下 from torchvision.dataset ...

  5. 使用Reactor响应式编程

    介绍 响应式编程 响应式编程不同于我们熟悉的命令式编程,我们熟悉的命令式编程即代码就是一行接一行的指令,按照它们的顺序一次一条地出现.一个任务被执行,程序就需要等到它执行完了,才能执行下一个任务.每一 ...

  6. 2019-2020-1 20199308《Linux内核原理与分析》第九周作业

    <Linux内核分析> 第八章 可执行程序工作原理进程的切换和系统的一般执行过程 8.1 知识点 进程调度的时机 ntel定义的中断类型主要有以下几种 硬中断(Interrupt) 软中断 ...

  7. udp包最大数据长度是多少

    因为udp包头有2个byte用于记录包体长度. 2个byte可表示最大值为: 2^16-1=64K-1=65535    udp包头占8字节, ip包头占20字节, 65535-28 = 65507 ...

  8. dhcp协议抓包分析

    dhcp协议 DHCP,动态主机配置协议,前身是BOOTP协议,是一个局域网的网络协议,使用UDP协议工作,常用的2个端口:67(DHCP server),68(DHCP client). wires ...

  9. 2019-2020-1 20199329《Linux内核原理与分析》第十二周作业

    <Linux内核原理与分析>第十二周作业 一.本周内容概述: 通过编程理解 Set-UID 的运行机制与安全问题 完成实验楼上的<SET-UID程序漏洞实验> 二.本周学习内容 ...

  10. maven过滤配置文件

    第一种方式, 解决maven打包时,会编译特定文件导致文件不可用maven打包时,过滤不编译文件类型 <plugin>    <groupId>org.apache.maven ...