因为在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. 如何用 CSS 和 D3 创作旋臂粒子动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJrOqd 可交互视频 ...

  2. nrf开发笔记一开发软件

    nrf52810 的开发环境,比较主流的可以使用keil,iar亦可.sdk中,使用的是pca10040e,s112.虽然开发板共用一个型号(pca10040) keil5中,cmsis 需要4.5. ...

  3. Party Games UVA - 1610 贪心

    题目:题目链接 思路:排序后处理到第一个不同的字符,贪心一下就可以了 AC代码: #include <iostream> #include <cstdio> #include ...

  4. Linux压缩与归档

    文件的压缩     aaaaaabbbbccc压缩成为6a4b3c     压缩工具:     gzip/gunzip: .gz后缀         只能压缩文件,不能压缩目录,因其不具备归档功能   ...

  5. WPF使用异步+绑定的方式处理大数据量

    WPF的优势在于界面处理,即使是这样,在面对大数据量的时候也免不了界面假死,同一个线程里处理界面跟大数据量,这是不可避免的.解决办法还是有的,可以使用分页加载,虚拟加载,动态加载,增加条件限制... ...

  6. python面试题解析（python基础篇80题）

    1.   答:出于编程的喜爱,以及行业本身的前瞻性,创造性,优越性,越是综合的科目越能检验一个人的能力,喜欢这种有挑战的事情. 2.   答:跟随老师学习,以及自己查询资料,结合实战,进行输入输出以及 ...

  7. 网络编程基础socket 重要中：TCP/UDP/七层协议

    计算机网络的发展及基础网络概念 问题:网络到底是什么?计算机之间是如何通信的? 早期 : 联机 以太网 : 局域网与交换机 广播 主机之间“一对所有”的通讯模式,网络对其中每一台主机发出的信号都进行无 ...

  8. 简单配置.htaccess就可以实现的10个功能

    http://bbs.itcast.cn/thread-25990-1-1.html?xhw 1. 反盗链那些盗用了你的内容,还不愿意自己存储图片的网站是很常见的.你可以通过以下配置来放置别人盗用你的 ...

  9. python - 读取配置文件

    # -*- coding:utf-8 -*- ''' @project: jiaxy @author: Jimmy @file: read_config.py @ide: PyCharm Commun ...

  10. [java开发篇][dom4j模块]遍历，解析xml

    package com.softwinner.performance.benchmark; /** * Created by Administrator on 2017/7/21. */ import ...