因为在reactelement中有一个属性是key，该属性默认是为空值，所以一般情况下，只要组件不加上key值，react是不会去校验组件的key，而是直接采用diff算法进行对比，一旦组件加上了key值，react就会在渲染时对该组件的身份进行校验，首先校验新旧组件的key值是不是一致，不一致的话，该组件直接销毁，然后在新建该组件；如果一致，则比较组件的属性是否发生变化，如果发生变化，则采用diff算法进行对比，然后得出差异对象，如果属性没发生变化，则认为该组件不需要改变；

大概的流程图：

react的key值的作用的更多相关文章

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

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

  2. react中key值的理解

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

  3. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  4. vue、react中循环遍历为什么会有key，key有什么作用？

    先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...

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

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

  6. React 中的key值

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

  7. react中对于key值的理解

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

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

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

  9. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

随机推荐

  1. Voyager的数据库操作与Bread Builder，解决国内打开网速超级慢的问题

    Products表的创建: Bread Builder 伟大的XX封了谷哥,所以有关网站实在是打不开,正准备放弃的时候,突然发现问题了,对就是这个网站ajax.googleapis.com,由于调用的 ...

  2. GoogleTest 之路1-Generic Build Instructions编译指导总方案

    准备工作 为了在你的测试中使用GoogleTest, 你必须让你的编译系统 知道到哪里去寻找GoogleTest 的头文件和源文件. 具体的方法只能依赖于你具体使用的哪种编译系统了,一般来讲这个非常容 ...

  3. angular4使用代理

    1. 在angular-cli项目根目录下创建proxy.config.json { "/api/v1": { "target": "http://1 ...

  4. selenium2自动处理验证码

    最近在研究web自动化,登录时发现要输入验证码,之前在做手机app自动化时,就被验证码block了.这次做web时又遇到了,探索之后,发现有如下几个解决办法: 1.联系开发人员,让其帮忙在测试环境中注 ...

  5. PHP如何利用sleep实现 输出->等待->输出

    sleep()函数一般用在暂停上,但是一个PHP一旦有了sleep,其他的输出(print,echo)就都要等待sleep()函数的完成,这是因为缓冲区,这里有详细解释 在这里不赘述,而如果要实现先输 ...

  6. Mime类型与文件后缀对照表及探测文件MIME的方法

    说明:刚刚写了一篇<IHttpHandler的妙用(2):防盗链!我的资源只有我的用户才能下载>的文章,网址:http://blog.csdn.net/zhoufoxcn/archive/ ...

  7. webdriver高级应用- 无人工干预地自动下载某个文件

    在网页上下载文件时,通常需要人为设定下载文件并选择保持路径,这样就无法实现完全自动的下载过程.下面实现基于firefox浏览器的全自动化文件下载操作: #encoding=utf-8 from sel ...

  8. how can I ues Dataset to shuffle a large whole dataset?

    The Dataset.shuffle() implementation is designed for data that could be shuffled in memory; we're co ...

  9. Python socket粘包问题(初级解决办法)

    server端配置: import socket,subprocess,struct from socket import * server=socket(AF_INET,SOCK_STREAM) s ...

  10. zabbix2.4升级到2.5 --考虑升级到zabbix3.0

    现在zabbix服务器,zabbix服务日志频繁出现MySQL server  has gone away,经搜索,此问题在zabbix2.5之前是zabbix的一个bug,zabbix2.5后已经修 ...