Ant Design 4.0更新指南（1）——ProTable

作为React技术栈的坚定拥护者，一定离不开阿里爸爸的大怀抱。作为国内最好用的组件库【之一】的Ant Design迎来个跨版本大更新，年后复工后我在第一时间便进行了尝鲜，刚好公司有老项目重构，在初步了解之后，决定尝试在新项目中使用And Design 4.0进行开发，与之对应的Ant Design Pro也更新到了4.0版本，Ant Design Pro是给予Ant Design的开箱即用中台前端/设计解决方案。简单的说，Ant Dsign是砖头，那Ant Design Pro就是用这些砖头垒起来的框架，你可以基于这个框架来按照你自己的想法重新装修，也可以在不破坏主体结构的情况下拆除部分内容重建。举个例子，对于我来说，原框架集成的国际化部分是无用的，那我就需要剔除。本系列文章主要针对在项目中使用Ant Design 4.0中遇到的一下值得注意的点~

本片先来说一下让我很是喜欢的ProTable这个新组件，让我们一起来看看它到底Pro在哪里。

以往，我们在做列表功能之类，需要重复的去手动的在componentDidMount钩子写请求数据，然后把数据重model中取出来，然后再放到Table组件的dataSource属性中，然后还要处理pageChange事件，然后还要手动的去渲染搜索项，然后就又得自己去引入各种组件，然后又各种堆接节点...这个过程下来，人都要惆怅咯。再加之一般做这种中后台管理系统，类似的功能很多，重复且低效的工作方式简直无法忍受。

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Button, DatePicker, Divider, message, Table } from 'antd';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { formatDate, getStartTimeStamp, getEndTimeStamp } from '@/utils/utils';
import styles from './style.less';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

/* eslint react/no-multi-comp:0 */
@connect(({ approval, studentManagment, loading }) => ({
  approval,
  studentManagment,
  loading: loading.effects['studentManagment/fetch'],
}))
@Form.create()
class StudentManagement extends PureComponent {
  state = {
    selectedRows: [],
    formValues: {},
  };

  columns = [
    {
      title: '名称',
      dataIndex: 'name',
      render: val => val || '-',
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
      render: val => val && formatDate(val),
    },    {
      title: '性别',
      dataIndex: 'sex'
    },
    {
      title: '年龄',
      dataIndex: 'age'
    },
    {
      title: