Ant Design v4.0.0 发布，顺手更新体验一下
这是一篇最后编辑于 6 年前 的文章，其内容可能与目前实际情况差异较大，请注意甄别
Ant Design升级到v4版本
设计规范调整
- 行高从 1.5(21px) 调整为 1.5715(22px)。
- 基础圆角调整，由4px 改为 2px。
- Selected 颜色和 Hovered 颜色进行了交换。
- 全局阴影优化，调整为三层阴影区分控件层次关系。
- 气泡确认框中图标的使用改变，由问号改为感叹号。
- 部分组件选中颜色统一改为 @blue-1: #E6F7FF，对应 hover 颜色改为 @gray-2: #FAFAFA。
- 报错色色值调整，由 @red-5: #F5222D 改为 @red-5: #FF4D4F。
- 分割线颜色明度降低，由 #E8E8E8 改为 #F0F0F0。
- DatePicker 交互重做，面板和输入框分离，范围选择现可单独选择开始和结束时间。
- Table 默认背景颜色从透明修改为白色。
- Tabs 火柴棍样式缩短为和文字等长。
由于一些代码修改较大，因此需要对已有代码进行修改
Icon 修改
这次图标从原先的全量引入改为了按需加载，对于确定只需要单个图标的地方，可以通过按需引入只加载单个图标的svg，共计能节省150KB
但是！ 由于左侧的导航部分使用了动态图标，因此这里不能按需加载，因此需要使用import { Icon } from '@ant-design/compatible';来引入原本的Icon以供使用（@ant-design/compatible需要单独下载）
Form 修改
原本Ant Design的Form使用Form.create()、this.props.form.getFieldDecorator()等函数对各种表单进行修改，可以说是非常不优雅的一种写法，这次更新将Form改写成了更符合直觉的写法1
首先，删掉导出的Form.create()部分，原先使用this.props.form.getFieldDecorator()设置的名称、规则直接通过Form.Item的参数设置
而获得Form实例有两种方式，首选的方案为使用const [form] = Form.useForm();，但是这种写法在class component中无法使用，因此应该使用另一种方案formRef = React.createRef<FormInstance>();，并使用<Form ref={this.formRef}>来绑定
需要调用form相关函数时，可以使用this.formRef.current.getFieldsValue()
字段的初始值设置，移入了<Form initialValues={{"name":"OhYee"}}>，同时字段对应属性valuePropName则移入Form.Item
Row 修改
新版本的栅格组件将flex从Row移入Col，因此所有涉及到布局的内容都应该重新修改
Table 修改
Table基本上没有太大的修改，只不过改了下表格背景色及一些细节
但是最大的问题在于引入了一个新的Bug：在column中的setState()不会触发表格重新渲染（但是值确实已经改变了）。对于可编辑的表格来说，将导致功能不可用。
临时的解决方案时，把对应行的 key 值修改成别的值，然后再修改回去，从而触发行重新渲染，相关Issue见参考资料2 3。
不过由于这里后台深度依赖于该功能，以及设计拓展字段也依赖于该功能，这种深层次的修改更为复杂，因此还是等待官方更新。