antd Table中的key值问题

问题描述

使用antd中的Table时，一直报这个错

但是我按照antd的文档进行key值的设定了还是报错，所以我重新启了一个项目想看看key值到底什么鬼。

测试代码：

import React, { Component } from 'react';
import { Table } from 'antd';
import 'antd/dist/antd.css';

const dataSource = [{
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  }, {
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }];

  const columns = [{
    title: '姓名',
    dataIndex: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
  }, {
    title: '住址',
    dataIndex: 'address',
  }];
class TableCom extends Component {
  render() {
    return (
      <div>
        <Table 
            dataSource={dataSource} 
            columns={columns} 
            bordered={true}
        />
      </div>
    );
  }
}

export default TableCom;

这段代码能够渲染出我们想要的表格样子但是肯定会报错，因为没有设置key值，所以key到底是什么的？

如果我们给表格增加了一行内容

表面上我们可能看到的就是增加了一行内容，但是对于react内部做的事情却很多。首先，react有虚拟dom的概念，就是一个虚拟的数据结构，每次判断是否渲染时将之前的虚拟树与新的虚拟树进行比较，当然是根据diff算法来进行判断的，发现原来的两行都与新树中对应位置上的两个元素不同，就会对其修改，并向真实dom树中插入新的节点，而我们的初衷并不想这样，这样使react的渲染效率降低，所以react推荐采用赋值key这个想法。

回到我们最初的例子，如果我们给数据采用以下变化：

初始数据

const dataSource = [{
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    key: '1'
  }, {
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    key: '2'
  }];

更改数据

const dataSource = [{
    name: '周杰伦',
    age: 42,
    address: '西湖区湖底公园1号',
    key: '0'
  }, {
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    key: '1'
  }, {
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    key: '2'
  }];

react经过diff发现key值1，2的元素仅仅是移动了位置，因为key值相同的元素进行对比后发现内容一致就对该节点进行了复用，然后新插入了key=0的元素，所以并没有新建节点这个过程。这个例子可能不是特别明显，看看下个例子：

初始数据

const dataSource = [{
    key: '0',
    value: 'a'
  }, {
    key: '1',
    value: 'b'
  }, {
    key: '2',
    value: 'c'
}];

更改数据

const dataSource = [{
    key: '0',
    value: 'b'
  }, {
    key: '1',
    value: 'c'
  }, {
    key: '2',
    value: 'a'
}];

react发现key值为0，1，2的元素的内容都变了，将会修改三者的text，而不是移动它们的位置，所以就减少了重排，提高了性能。

官方文档指出：按照 React 的规范，所有的组件数组必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

key作为数据的唯一标识符，帮助我们告诉react我们在对哪里的数据进行操作，所以key值必须唯一且不变，因为key值的变化会引起页面的重新渲染。