一、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 完善dataSourcecolumns

每一行(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)的更多相关文章

  1. React 中的key值

    在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...

  2. 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  3. 详解 Diff 算法以及循环要加 key 值问题

    上一篇文章我简述了什么是 Virtual DOM,这一章我会详细讲 Diff 算法以及为什么在 React 和 Vue 中循环都需要 key 值. 什么是 DOM Diff 算法 Web 界面其实就是 ...

  4. 浅谈React

    浅谈react react是什么?其官网给出了明确定义:A JavaScript library for building user interfaces,一个用于构建用户界面的JavaScript库 ...

  5. react中对于key值的理解

    1.key是用来帮助react识别哪些内容被更改.添加或者删除.key需要写在用数组渲染出来的元素内部,并且需要赋予其一个稳定的值.如果key值发生了变更,react则会触发UI的重渲染. 2.在相邻 ...

  6. 浅谈React虚拟DOM

    为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...

  7. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  8. 【转】浅谈React、Flux 与 Redux

    本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...

  9. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

随机推荐

  1. 补充:MySQL整理

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...

  2. Excel GET.DOCUMENT说明

    GET.DOCUMENT(type_num, name_text) Type_num    指明信息类型的数.下表列出 type_num 的可能值与对应结果. Type_num        返回 1 ...

  3. Docker入门基础(一)

    Docker入门基础 Linux只存在文件目录,不存在“盘”的概念 Dockers优点:方便部署环境.资源占用少(微服务) Docker的三大概念 镜像:类似虚拟机的镜像.用俗话说就是安装文件.容器: ...

  4. ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接

    Traceback (most recent call last): File "C:\Users\Administrator\AppData\Local\Programs\Python\P ...

  5. BeanUtils工具类

    用对象传参,用JavaBean传参. BeanUtils可以优化传参过程. 学习框架之后,BeanUtils的功能都由框架来完成. 一.为什么用BeanUtils? 每次我们的函数都要传递很多参数很麻 ...

  6. mysql 目录

    初识数据库 mysql 初识sql语句 mysql 操作sql语句 mysql 数据库操作 mysql 数据表操作 mysql 数据操作 mysql 权限管理 mysql内置功能之视图.触发器.事务. ...

  7. JAVA-数据库之MySQL与JDBC驱动下载与安装

    相关资料:<21天学通Java Web开发> MySQL下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-wi ...

  8. java框架之Spring(2)-注解配置IOC&AOP配置

    注解配置IoC 准备 1.要使用注解方式配置 IoC,除了之前引入的基础 jar 包,还需要引入 spring-aop 支持包,如下: 2.在 applicationContext.xml 中引入 c ...

  9. JMeter-充值-生成随机数

    1.随机数,orderId每次需要变化,需要用到随机数 验证生成的随机数:

  10. HDU 2586 How far away(dfs+邻接表)

    How far away [题目链接]How far away [题目类型]dfs+邻接表 &题意: 题目大意:一个村子里有n个房子,这n个房子用n-1条路连接起来,接下了有m次询问,每次询问 ...