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. 013-结构体-C语言笔记

    013-结构体-C语言笔记 学习目录 1.[掌握]返回指针的函数 2.[掌握]指向函数的指针 3.[掌握]结构体的声明 4.[掌握]结构体与数组 5.[掌握]结构体与指针 6.[掌握]结构体的嵌套 7 ...

  2. GeoGebra案例（傅里叶级数的方波）

    傅里叶级数介绍:请移步参见这位马大佬的博文 https://www.matongxue.com/madocs/619.html 马大佬中的gif图在我看来是非常直观且有趣的,奈何本人本领实在有限,学习 ...

  3. SDL-开篇明义

    SDL只是方法论,忌为SDL而SDL 1.sdl是什么 sdl是安全研发生命周期 ,一个方法论, 理念是安全左移, 通过各种方法.工具.流程设计和交付更安全的软件,以期望降低安全成本,最终还是为了保护 ...

  4. 数据结构（C语言版）---栈

    1.栈:仅在表尾进行插入和删除操作的线性表.后进先出LIFO. 1)表尾端(允许插入和删除的一端)为栈顶,表头端(不允许插入和删除的一端)为栈底. 2)入栈:插入元素的操作.出栈:删除栈顶元素 3)栈 ...

  5. 利用Putty建立SSH的tunnels访问内网资源

    适用场景访问阿里或者腾讯云只针对内网开放的资源. 本文以SQLSERVER 举例 举例你的内网 SQLSERVER的访问地址是192.168.33.88 . 你的Microsoft SQL Serve ...

  6. SQLyog-证书密钥

    * 用户名: + 随意填写 * 秘钥: + b70d7f66-dac2-4462-bf51-c4e9347da763 + ccbfc13e-c31d-42ce-8939-3c7e63ed5417 + ...

  7. Ansible playbook Vault 加密

    Ansible playbook Vault 加密详解与使用案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务 ...

  8. centos7与8的区别

    1.关于内核版本:RHEL8采用4.18.0-xRHEL7采用3.10-0-x 2 网络时间同步 RHEL8 只使用Chronyd,不支持NTP部署. RHEL7Chronyd与NTP两者都支持 3. ...

  9. Spring boot 自定义banner

    Spring Boot启动的时候会在命令行生成一个banner,其实这个banner是可以自己修改的,本文将会将会讲解如何修改这个banner. 首先我们需要将banner保存到一个文件中,网上有很多 ...

  10. 谷歌提高Google Assistant中Voice Match的准确性

    谷歌正在提高 Google Assistant 中 Voice Match 的准确性,使其变得更加完善.谷歌表示一旦用户在 Google Assistant 中启用 Voice Match 功能,那么 ...