浅了解: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. 在一次操作中, ...
随机推荐
- php验证18位身份证,准到必须输入正确的身份证号,
/** * 验证18位身份证(计算方式在百度百科有) * @param string $id 身份证 * return boolean */ function check_identity($id=' ...
- Linux命令 diff cmp patch
diff: 以行为单位进行比对 $ cat passwd | sed -e '4d' -e '6c no six line' > passwd.new $ cat -n passwd.new 1 ...
- 客户续费模型 逻辑回归 分类器 AdaBoost
客户续费模型 逻辑回归 分类器 AdaBoost
- linux下查看网卡速率
转自:http://blog.csdn.net/liugongfeng/article/details/50263733 我们都知道ifconfig -a 可以列出所有网卡,但是怎么判读是千兆网卡还是 ...
- 基于Enterprise Architect完成数据库建模
基于Enterprise Architect完成数据库建模 “工欲善其事必先利其器”,Enterprise Architect是一款非常便利的设计工具,目前我也是刚刚使用没多久,进行过系统设计.UML ...
- 官方Canvas API文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
- java框架之SpringBoot(8)-嵌入式Servlet容器
前言 SpringBoot 默认使用的嵌入式 Servlet 容器为 Tomcat,通过依赖关系就可以看到: 问题: 如何定制和修改 Servlet 容器相关配置? SpringBoot 能否支持其它 ...
- Sysinternals Utilities
https://docs.microsoft.com/zh-cn/sysinternals/ Sysinternals 之前为Winternals公司提供的免费工具,Winternals原本是一间主力 ...
- require 和 import 区别
我很懵逼啊 都是在引用模块,那到底用哪个? 参考:https://www.cnblogs.com/hwldyz/p/9145959.html 看来会明白一点的 首先这两个都是为了JS模块化编程使用. ...
- cocos creator 背景音乐音量和音效音量百分比设置
把音效的音量大小百分比保存在本地,播放音效的时候,带上音量大小,就像这样 你播放背景音乐时候,保存背景音乐的id,通过改变音量大小来调节背景音乐,就像这样 cc.audioEngine.setVolu ...