Antd3 To Antd4

前提条件

1. 需将 Antd3 升级到最新版本，并解决控制台的警告与报错
2. React要求最低为16.9.0版本，但推荐至少16.12.0版本以上

实施流程

根据官方文档的说明，需要先将antd升级到3的最新版本，然后利用codemod cli工具替换语法，最后手动解决一些警告。

1. 手动升级到4版本，官方提供的工具并不会自动升级antd版本

   npm install antd@4 --save
   

2. 根据官方文档，利用提供的codemod cli工具@ant-design/codemod-v4，快速升级到v4（自动将antd3的语法升级），不过无法全部替换，其余问题需要手动修改。

   注意：在运行codemod cli之前，必须提交本地代码,否则报错。

   // 下载并使用官方工具
   # Run directly through npx
   npx -p @ant-design/codemod-v4 antd4-codemod src
   
   # Or global installation
   # Use npm
   npm i -g @ant-design/codemod-v4
   # Use yarn
   yarn global add @ant-design/codemod-v4
   
   // 提交代码
   git add .
   git commit -m update
   
   # Execute
   antd4-codemod src
   

3. 执行完毕，项目跑不起来，发现报错

   

   终端提示需要下载或更新一些依赖

   依次执行如下命令（按照终端提示下载）

   npm i @ant-design/icons^4.0.0 --save
   npm i @ant-design/compatible^1.0.0 --save
   

   手动修改package.json中上述依赖的版本号，注意版本保持和终端提示一致，然后执行 npm install

   

   终端显示如下，就是成功了
   

4. 项目仍然启动不了

   npm run start 后白屏，控制台有一些报错
   
   将 node_moudles 删除，再npm install 即可

5. 需要手动解决的警告

   至此，项目已经可以正常运行，但控制台仍有警告，若想继续升级到antd5，需要手动解决这些警告。
   

   根据官网修改后，警告即可消失

antd4做了哪些调整

设计规范调整

• 行高从 1.5(21px) 调整为 1.5715(22px)。
• 字体颜色从 rgba(0, 0, 0, 0.65) 调深为 rgba(0, 0, 0, 0.85)。4.6.0
• 基础圆角调整，由 4px 改为 2px。
• Selected 颜色和 Hovered 颜色进行了交换。
• 全局阴影优化，调整为三层阴影区分控件层次关系。
• 气泡确认框中图标的使用改变，由问号改为感叹号。
• 部分组件选中颜色统一改为 @blue-1: #E6F7FF，对应 hover 颜色改为 @gray-2: #FAFAFA。
• 报错色色值调整，由 @red-5: #F5222D 改为 @red-5: #FF4D4F。
• 分割线颜色明度降低，由 #E8E8E8 改为 #F0F0F0。
• DatePicker 交互重做，面板和输入框分离，范围选择现可单独选择开始和结束时间。
• Table 默认背景颜色从透明修改为白色。
• Tabs 火柴棍样式缩短为和文字等长。
• Tabs 交互重做，DOM 结构改变。4.3.0

兼容性调整

• IE 最低支持版本为 IE 11。
• React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构。
  • 重构通过 useMemo 进行性能优化，请勿使用 mutable data 作为参数。
• 最低支持的 less 版本为 3.1.0，建议升级到 less 4.x 最新版本。

移除废弃的 API

• 移除了 LocaleProvider，请使用 ConfigProvider 替代。
• 移除了 Mention，请使用 Mentions 替代。
• 移除了 Alert 的 iconType 属性，请使用 icon 替代。
• 移除了 Modal.xxx 的 iconType 属性，请使用 icon 替代。
• 移除了 Form.create 方法，form 现可由 Form.useForm 获取。
• 移除了 Form.Item 的 id 属性，请使用 htmlFor 替代。
• 移除了 Typography 的 setContentRef 属性，请使用 ref 替代。
• 移除了 TimePicker 的 allowEmpty 属性，请使用 allowClear 替代。
• 移除了 Tag 的 afterClose 属性，请使用 onClose 替代。
• 移除了 Card 的 noHovering 属性，请使用 hoverable 替代。
• 移除了 Carousel 的 vertical 属性，请使用 dotPosition 替代。
• 移除了 Drawer 的 wrapClassName 属性，请使用 className 替代。
• 移除了 TextArea 的 autosize 属性，请使用 autoSize 替代。
• 移除了 Affix 的 offset 属性，请使用 offsetTop 替代。
• 移除了 Transfer 的 onSearchChange 属性，请使用 onSearch 替代。
• 移除了 Transfer 的 body 属性，请使用 children 替代。
• 移除了 Transfer 的 lazy 属性，它并没有起到真正的优化效果。
• 移除了 Select 的 combobox 模式，请使用 AutoComplete 替代。
• 移除了 Table 的 rowSelection.hideDefaultSelections 属性，请在 rowSelection.selections 中使用 SELECTION_ALL 和 SELECTION_INVERT 替代，自定义选择项。
• 废弃 Button.Group，请使用 Space 代替。

图标升级

在 antd@3.9.0 中，引入了 svg 图标。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 4.0 中，调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。

旧版 Icon 使用方式将被废弃：

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0 中会采用按需引入的方式：

  import { Button } from 'antd';

  // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

仍然可以通过兼容包继续使用：

import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

组件重构

• Form 重写
  • 不再需要 Form.create。
  • 嵌套字段支持从 'xxx.yyy' 改成 ['xxx', 'yyy']。
  • validateTrigger 不再收集字段值。
  • 迁移文档请查看此处。
• DatePicker 重写
  • 提供 picker 属性用于选择器切换。
  • 范围选择现在可以单独选择开始和结束时间。
  • onPanelChange 在面板值变化时也会触发。
  • 自定义单元格样式的类名从 ant-calendar-date 改为 ant-picker-cell-inner。
• Tree、Select、TreeSelect、AutoComplete 重新写
  • 使用虚拟滚动。
  • onBlur 时不再修改选中值，且返回 React 原生的 event 对象。
    • 如果你在使用兼容包的 Form 且配置了 validateTrigger 为 onBlur，请改至 onChange 以做兼容。
  • AutoComplete 不再支持 optionLabelProp，请直接设置 Option value 属性。
  • AutoComplete 选项与 Select 对齐，请使用 options 代替 dataSource。
  • Select 移除 dropdownMenuStyle 属性。
  • 如果你需要设置弹窗高度请使用 listHeight 来代替 dropdownStyle 的高度样式。
  • filterOption 第二个参数直接返回原数据，不在需要通过 option.props.children 来进行匹配。
  • Tree、TreeSelect 同时指定 title 和 label 的时候，会选择显示 label。为了 labelInValue 行为一致进行了该调整。新行为（在第一个节点展示 ‘label’），旧行为（在第一个节点展示 ‘title’）。
  • Tree 传入内容采用 treeData 属性，来代替 TreeNode 方式，TreeNode 依然可用，但是会在控制台抛出警告。
• Grid 组件使用 flex 布局。
• Button 的 danger 现在作为一个属性而不是按钮类型。
• Input、Select 的 value 为 undefined 时改为非受控状态。
• Table 重写
  • 在没有 columns 时仍然会保留一列。
  • 嵌套 dataIndex 支持从 'xxx.yyy' 改成 ['xxx', 'yyy']。
• Pagination 重写
  • 自 4.1.0 起大于 50 条数据默认会展示 pageSize 切换器，这条规则同样会运用于 Table 上。
  • onChange 方法在 pageSize 值改变时也会触发。
• Tabs 重写（4.3.0）
  • Dom 结构变化，如有覆盖样式需要仔细检查。
  • 横向滚动交互变化，onPrevClick 和 onNextClick 不再工作。
• less 变量变化，如 DatePicker/TimePicker/Calendar 相关变量已全部重构，又如 @btn-padding-base 等进行了重命名，具体变化请自行对比 3.x 变量 和 4.x 变量。

<Table
  columns={[
    {
      title: 'Age',
-     dataIndex: 'user.age',
+     dataIndex: ['user', 'age'],
    },
  ]}
/>