React组件中的key

一、key的作用

  react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。

  简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。例如下面代码:

//this.state.users内容
this.state = {
users: [
{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
},
{
id: 2,
name: "王五"
}],
  ....//省略}
render()
return (
<div>
<h3>用户列表</h3>
{this.state.users.map(
u => <div key={u.id}>{u.id}: {u.name}</div>
)}
</div>
)
);

  上面代码在dom渲染挂载后,用户列表只有张三李四两个用户,王五并没有展示处理,主要是因为react根据key认为李四王五是同一个组件,导致第一个被渲染,后续的会被丢弃掉。

  这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。

  1) key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。

  2) key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件。

  3) setState:谁用到了所更新的state,就会刷新该组件,render也并不是所有都会变化,只变state改变的部分。

另外需要指明的是:

key不是用来提升react的性能的,不过用好key对性能是有帮组的。

  应该知道React使用virtual dom来比较UI状态的变化,如果DOM中的某一节点更新时重新渲染,一样的话就不渲染。key属性的作用就在与解决渲染List的这种难题,简单来说,例如你有一个List:

<li>Orange</li> <li>Banana</li>

如果想更新成

<li>Apple</li> <li>Orange</li>

那dom比较算法就可以有多种选择,例如销毁两个,生成两个新的代替,或者销毁banana,在orange前插入apple等等,当list多的时候情况就比较复杂,所以React为了使得Dom比较算法最快,需要你提供给每一个list元素一个特殊的key,这样就容易比较前后两个大型的List了,帮助React如何移动、替代、销毁、插入节点,例如:

let List = this.props.fruits.map((fruit) => {
return <FruitList key={fruit.id} name={fruit.name}/>
}); return (<div>{List}</div>)

二、注意

1、key是React中使用的一种特殊的属性(除此之外还有ref属性)。当元素被创建的时候,React会将元素的key值和对应元素绑定存储起来。
2、尽管key看起来像是props的一部分,可是事实上我们无法通过this.props.key获取到key的值。React会在判断元素更新的时候自动使用key,而组件自己是无法获取到key的
3、当一个列表被重新渲染时,React会根据较新的元素内容依据相应的key值来匹配之前的元素内容
4、当一个新的key值添加到列表中时,表示有一个组件被创建;被删除时表示有一个组件被销毁。
5、Key值可以让React明确标识每个组件,这样在重新渲染的时候保有对应的状态数据。
6、如果你去改变某个组件的key值的话,它会在下次渲染的时候被销毁并当作新的组件重新渲染进来

React组件中的key的更多相关文章

  1. react组件中刷新组件小技巧

    在开发过程中,经常遇到组件数据无法更新,例如:当你用同一个表格展示不同数据的时候,当点击第5页后,再点击另外一份数据时发现还在第五页,并没有回到第一页. 怎么能让一个组件每次数据不一样时都重新加载呢, ...

  2. 规避 React 组件中的 bind(this)

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...

  3. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  4. 【React】282- 在 React 组件中使用 Refs 指南

    英文:Yomi Eluwande  译文:joking_zhang https://segmentfault.com/a/1190000019277029 使用 React 时,我们的默认思维方式应该 ...

  5. React组件中对子组件children进行加强

    React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...

  6. 在 React 组件中使用 Refs 指南

    原文:Fullstack React's Guide to using Refs in React Components作者:Yomi Eluwande译者:博轩 译文:https://segment ...

  7. 写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么

    怼一波,在项目中有很多经常用到,但又含糊不清的知识点 框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能: 2. 凭啥要保证 ...

  8. 在 React 组件中监听 android 手机物理返回/回退/back键事件

    当前端页面嵌入到 webview 中运行时,有时会需要监听手机的物理返回按键事件来做一些自定义的操作. 比如我最近遇到的,在一个页面里面有批量选择的功能,当点击手机的返回键时,清除页面上的选中状态.我 ...

  9. react组件中返回并列元素的方法

    我们在写react组件的时候,经常会遇到这种问题,在render中return元素只能有一个顶级元素,比如div,假如写成这样就会报错: render(){ return( <div>12 ...

随机推荐

  1. Swift 类型桥接

    前言 iOS 中的 API 基本都是在许多年前由 OC 写成的,现在通过桥接的方法在 Swift 中可以用,基本看不出区别,非常自然.但是一些特殊的类型,在两种语言进行桥接的时候需要特别注意. 1.N ...

  2. Spring Boot优化

    针对目前的容器优化,目前来说没有太多地方,需要考虑如下几个点: 线程数 超时时间 jvm优化 首先线程数是一个重点,初始线程数和最大线程数,初始线程数保障启动的时候,如果有大量用户访问,能够很稳定的接 ...

  3. SqlServer 2008的tempdb数据文件大小暴增处理

    tempdb数据文件暴增,导致服务器磁盘空间被耗尽! 1.查看tempdb的使用分配情况 use tempdb go SELECT top 10 t1.session_id, t1.internal_ ...

  4. Xilinx 常用模块汇总(verilog)【04】

    作者:桂. 时间:2018-05-15  13:07:02 链接:http://www.cnblogs.com/xingshansi/p/9040472.html 前言 Xilinx 常用模块汇总(v ...

  5. 自己实现字符串转整数(不使用JDK的字符串转整数的方法)

    [需求]: (1)如果输入的字符串为null,为空,或者不是数字,抛出异常: (2)如果输入的数字超出int的最大值或最小值,抛出异常: (3)输入的数字允许以+或-号开头,但如果输入的字符串只有&q ...

  6. 模仿CountDownLatch类自定义倒时计时器

    简介 这里模仿CountDownLatch类自定义到时计时器,利用AQS模板中的尝试获得共享和释放共享 1.MyCountDownLatch package com.jacky; import com ...

  7. Java知多少(100)图像处理基础

    图像是由一组像素构成,用二进制形式保存的图片.java语言支持GIF.JPEG和BMP这3种主要图像文件格式.java语言的图像处理功能被封装在Image类中. 图像载入和输出 在java程序中,图像 ...

  8. FatTree拓扑结构

    FatTree拓扑结构是由MIT的Fares等人在改进传统树形结构性能的基础上提出的,属于switch-only型拓扑. 整个拓扑网络分为三个层次:自上而下分别为边缘层(edge).汇聚层(aggre ...

  9. 教程:SpagoBI开源商业智能之XML Template 图表模板

    SpagoBI offers a variety of widgets' examples realized with the Highcharts library, that can be divi ...

  10. Java如何在指定端口创建套接字?

    在Java编程中,如何在指定端口创建套接字并连接到指定服务器的端口? 下面的例子演示了Socket类的Socket构造函数,并且使用getLocalPort(),getLocalAddress(),g ...