因为在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. java实现验证码功能

    java实现验证码功能 通过java代码实现验证码功能的一般思路: 一.通过java代码生成一张验证码的图片,将验证码的图片保存到项目中的指定文件中去,代码如下: package com.util; ...

  2. Vue源码探究-事件系统

    Vue源码探究-事件系统 本篇代码位于vue/src/core/instance/events.js 紧跟着生命周期之后的就是继续初始化事件相关的属性和方法.整个事件系统的代码相对其他模块来说非常简短 ...

  3. 【android】【android studio】修改emulator的本地化环境

    Changing the emulator locale from the adb shell To change the locale in the emulator by using the ad ...

  4. JAVA基础篇—继承

    父类Vehicle package com.car; public class Vehicle { final String brand;// String color;// double speed ...

  5. LeetCode（238） Product of Array Except Self

    题目 Given an array of n integers where n > 1, nums, return an array output such that output[i] is ...

  6. eclipse使用技巧的网站收集——转载（二）

    写代码离不开文本编辑器,看代码也离不开,iar和keil编辑和阅读简直一般般了,因此使用eclipse可以看看代码,提高效率.网上有几个博客的文章,这里收集一下,以备忘. 以下文章转载自:http:/ ...

  7. list_for_each_entry()函数分析

    list_for_each原型: #define list_for_each(pos, head) \ for (pos = (head)->next, prefetch(pos->nex ...

  8. 使用fio测试磁盘I/O性能

    简介: fio是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, libaio, posixaio, SG v3, splice, nu ...

  9. Monkeyrunner脚本的录制与回放

    继上一篇monkeyrunner环境搭建:http://www.cnblogs.com/zh-ya-jing/p/4351245.html 之后,我们可以进一步学习monkeyrunner了. 我也是 ...

  10. BZOJ 4985: 评分

    二分答案 >=key的记为1 f[i]表示令i位置为1所需要的最少的1的个数 队列模拟 #include<cstdio> #include<algorithm> usin ...