浅了解:react为何需要设定唯一key值(antd-table)
一、React规范
1.1 react key的作用
当渲染重复数据的时候,React.diff
会根据生成的key进行虚拟DOM渲染, 所以我们需要在遍历的地方都要加上key,例如map、for等等
同样, antd作为react的UI组件库, 有些地方也需要遵循react的key规范.例如 antd-table 在渲染前要求: 在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
1.2 antd-table key缺失
如果你的数据没有这个属性,务必使用 rowKey 来指定数据列的主键。若没有指定,控制台会出现以下的提示,表格组件也会出现各类奇怪的错误。
Each record in table should have a unique key
prop,or set rowKey
to an unique primary key.
虽然只是一个警告,但是这个会给页面table表格带来无法预测的错误
1.3 antd-table key相同
这种情况感觉到的错误会比较明显:因为你在一个列上的操作,在相同key上的列也会响应!
当鼠标滑过其中一个列并高亮的时候, 另一个列也会被高亮
二、添加Key值
我们知道了为什么添加key, 以及不添加key值会出现什么情况
2.1 完善dataSource
和columns
每一行(dataSource)和每一列(columns)都应该要有一个唯一key值, 渲染的时候react才能准确知道是否需要修改.
let columns = [{
key: '1',
title: '歌曲名字',
dataIndex: 'title'
}]
let dataSource = [{
key: 1,
title: '哑巴'
}]
<Table
columns={columns}
dataSource={dataSource}
/>
2.2 直接在table上加上每一列key值:rowKey
但是注意: 这个key也是要求唯一的
<Table
rowKey={(record, index) => `complete${record.id}${index}`}
...
/>
具体的可以查看官方文档: 《antd-table》
浅了解:react为何需要设定唯一key值(antd-table)的更多相关文章
- React 中的key值
在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...
- 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 详解 Diff 算法以及循环要加 key 值问题
上一篇文章我简述了什么是 Virtual DOM,这一章我会详细讲 Diff 算法以及为什么在 React 和 Vue 中循环都需要 key 值. 什么是 DOM Diff 算法 Web 界面其实就是 ...
- 浅谈React
浅谈react react是什么?其官网给出了明确定义:A JavaScript library for building user interfaces,一个用于构建用户界面的JavaScript库 ...
- react中对于key值的理解
1.key是用来帮助react识别哪些内容被更改.添加或者删除.key需要写在用数组渲染出来的元素内部,并且需要赋予其一个稳定的值.如果key值发生了变更,react则会触发UI的重渲染. 2.在相邻 ...
- 浅谈React虚拟DOM
为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...
- 【react】---react中key值的作用
一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
随机推荐
- 补充:MySQL整理
1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...
- Excel GET.DOCUMENT说明
GET.DOCUMENT(type_num, name_text) Type_num 指明信息类型的数.下表列出 type_num 的可能值与对应结果. Type_num 返回 1 ...
- Docker入门基础(一)
Docker入门基础 Linux只存在文件目录,不存在“盘”的概念 Dockers优点:方便部署环境.资源占用少(微服务) Docker的三大概念 镜像:类似虚拟机的镜像.用俗话说就是安装文件.容器: ...
- ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接
Traceback (most recent call last): File "C:\Users\Administrator\AppData\Local\Programs\Python\P ...
- BeanUtils工具类
用对象传参,用JavaBean传参. BeanUtils可以优化传参过程. 学习框架之后,BeanUtils的功能都由框架来完成. 一.为什么用BeanUtils? 每次我们的函数都要传递很多参数很麻 ...
- mysql 目录
初识数据库 mysql 初识sql语句 mysql 操作sql语句 mysql 数据库操作 mysql 数据表操作 mysql 数据操作 mysql 权限管理 mysql内置功能之视图.触发器.事务. ...
- JAVA-数据库之MySQL与JDBC驱动下载与安装
相关资料:<21天学通Java Web开发> MySQL下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-wi ...
- java框架之Spring(2)-注解配置IOC&AOP配置
注解配置IoC 准备 1.要使用注解方式配置 IoC,除了之前引入的基础 jar 包,还需要引入 spring-aop 支持包,如下: 2.在 applicationContext.xml 中引入 c ...
- JMeter-充值-生成随机数
1.随机数,orderId每次需要变化,需要用到随机数 验证生成的随机数:
- HDU 2586 How far away(dfs+邻接表)
How far away [题目链接]How far away [题目类型]dfs+邻接表 &题意: 题目大意:一个村子里有n个房子,这n个房子用n-1条路连接起来,接下了有m次询问,每次询问 ...