因为在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. Unity基础-脚本的加载与编译顺序

    脚本的加载与编译顺序 C#是以Assembly(汇编集)为一个基本单元组织代码的,dll就是一个assembly,dll之间有加载以来顺序 Assets/*.dll Stamdard Assets/* ...

  2. php使用curl访问https返回无结果的问题

    最近在做一个微信自动登录,发起验证以后回调页面获取openid时 curl函数返回空. $appid = "appid appid "; $secret = "secre ...

  3. OAuth认证协议中的HMACSHA1加密算法

    <?php function hmacsha1($key,$data) { $blocksize=64; $hashfunc='sha1'; if (strlen($key)>$block ...

  4. python 面向对象基础和高级复习

    面向对象基础 面向对象编程 面向过程编程:类似于工厂的流水线 优点:逻辑清晰 缺点:扩展性差 面向对象编程:核心是对象二字,对象属性和方法的集合体,面向对象编程就是一堆对象交互 优点:扩展性强 缺点: ...

  5. jmeter中基于oracle的JDBC Request的使用

    前提条件: 1.有数据库:2.数据库中有表,例如testuser(userid,username,usepwd): 设置如下: 参考自:http://www.linuxidc.com/Linux/20 ...

  6. HDU 5238 Calculator 线段树 中国剩余定理

    题意: 给一个计算器,有一系列计算步骤,只有加,乘,幂三种运算. 有一种查询操作:查询初始值为\(x\)的时候,最终运算结果模\(29393\)的值. 有一种修改操作:可以修改第\(p\)个运算的运算 ...

  7. UVa 10564 DP Paths through the Hourglass

    从下往上DP,d(i, j, k)表示第(i, j)个格子走到底和为k的路径条数. 至于字典序最小,DP的时候记录一下路径就好. #include <cstdio> #include &l ...

  8. 初试webpack打包

    第一次接触webpack,学习了如何用webpack打包,记录一下过程. 1.在项目根目录安装webpack $ npm install webpack --save-dev 2.新建一个webpac ...

  9. 如何理解redo和undo的作用

    目录 如何理解redo和undo的作用 redo undo UNDO和REDO的区别 如何理解redo和undo的作用 redo 重做日志(redo)包含所有数据产生的历史改变记录,是oracle在线 ...

  10. java作业 4

    public class dog { /**  * @param args  */ public static void main(String[] args) {  // TODO Auto-gen ...