解决antd表格分页后依然加载慢的问题

antd的表格也用了不少次了，但是有时候数据量也比较大（几千条），所以加载会非常的慢（慢到无法忍受），但是后端的兄弟也比较懒，直接一股脑把数据扔给我，而我只能自己来分页而且还要加快加载速度，于是我就想到了antd里面的Pagination组件

但是用过后发现分页是分页了，但是加载速度依然不快，还是需要优化，所以我觉的之所以会这样可能是因为虽然分页了，但是所有的数据依然渲染了，只是其它页没有展示出来而已，所以既然如此的话，那我只渲染当前页的数据就行了。

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: tags => (
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    )
  },
  {
    title: "Action",
    key: "action",
    render: (text, record) => (
      <span>
        <a>Invite {record.name}</a>
        <Divider type="vertical" />
        <a>Delete</a>
      </span>
    )
  }
];

const data = [];
for (let i = 0; i < 10000; i++) {// 造点数据
  data.push({
    key: `${i + 4}`,
    name: "John Brown" + i,
    age: i,
    address: "New York No. 1 Lake Park" + i,
    tags: [`loser${i}`]
  });
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      current: 1,
      pageSize: 10,
      data: data,
      data_: data.slice(0, 10)
    };
  }
  handleOnChange = (page, size, bool) => {
  	//page: 当前页，size：每页条数
    console.log(page, size);
    // 如果改变了每页的条数，就让它跳到第一页
    if (bool) {
      page = 1
    }
    // 只展示当前页的数据
    const data_ = data.slice((page - 1) * size, page * size);
    console.log(data_);
    this.setState({ data_, current:page, pageSize:size });
  }
  render() {
    const {current, pageSize} = this.state
    const pagination = {
      current,
      pageSize,
      pageSizeOptions: ['5', '10', '20', '50', '100'],
      onChange: (page, pageSize) => this.handleOnChange(page, pageSize, false),// 页码改变的回调
      onShowSizeChange: (current, size) => this.handleOnChange(current, size, true),//pageSize 变化的回调
      showSizeChanger: true,
      total: data.length
    };
    return (
      <Table
        columns={columns}
        dataSource={this.state.data_}
        pagination={pagination}
      />
    );
  }
}