Antd3 To Antd4

前提條件

1. 需將 Antd3 升級(jí)到最新版本，并解決控制臺(tái)的警告與報(bào)錯(cuò)
2. React要求最低為16.9.0版本，但推薦至少16.12.0版本以上

實(shí)施流程

根據(jù)官方文檔的說明，需要先將antd升級(jí)到3的最新版本，然后利用codemod cli工具替換語(yǔ)法，最后手動(dòng)解決一些警告。

1. 手動(dòng)升級(jí)到4版本，官方提供的工具并不會(huì)自動(dòng)升級(jí)antd版本

   npm install antd@4 --save
   

2. 根據(jù)官方文檔，利用提供的codemod cli工具@ant-design/codemod-v4，快速升級(jí)到v4（自動(dòng)將antd3的語(yǔ)法升級(jí)），不過無(wú)法全部替換，其余問題需要手動(dòng)修改。

   注意：在運(yùn)行codemod cli之前，必須提交本地代碼,否則報(bào)錯(cuò)。

   // 下載并使用官方工具
   # 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. 執(zhí)行完畢，項(xiàng)目跑不起來，發(fā)現(xiàn)報(bào)錯(cuò)

   

   終端提示需要下載或更新一些依賴

   依次執(zhí)行如下命令（按照終端提示下載）

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

   手動(dòng)修改package.json中上述依賴的版本號(hào)，注意版本保持和終端提示一致，然后執(zhí)行 npm install

   

   終端顯示如下，就是成功了
   

4. 項(xiàng)目仍然啟動(dòng)不了

   npm run start 后白屏，控制臺(tái)有一些報(bào)錯(cuò)
   
   將 node_moudles 刪除，再npm install 即可

5. 需要手動(dòng)解決的警告

   至此，項(xiàng)目已經(jīng)可以正常運(yùn)行，但控制臺(tái)仍有警告，若想繼續(xù)升級(jí)到antd5，需要手動(dòng)解決這些警告。
   

   根據(jù)官網(wǎng)修改后，警告即可消失

antd4做了哪些調(diào)整

設(shè)計(jì)規(guī)范調(diào)整

• 行高從 1.5(21px) 調(diào)整為 1.5715(22px)。
• 字體顏色從 rgba(0, 0, 0, 0.65) 調(diào)深為 rgba(0, 0, 0, 0.85)。4.6.0
• 基礎(chǔ)圓角調(diào)整，由 4px 改為 2px。
• Selected 顏色和 Hovered 顏色進(jìn)行了交換。
• 全局陰影優(yōu)化，調(diào)整為三層陰影區(qū)分控件層次關(guān)系。
• 氣泡確認(rèn)框中圖標(biāo)的使用改變，由問號(hào)改為感嘆號(hào)。
• 部分組件選中顏色統(tǒng)一改為 @blue-1: #E6F7FF，對(duì)應(yīng) hover 顏色改為 @gray-2: #FAFAFA。
• 報(bào)錯(cuò)色色值調(diào)整，由 @red-5: #F5222D 改為 @red-5: #FF4D4F。
• 分割線顏色明度降低，由 #E8E8E8 改為 #F0F0F0。
• DatePicker 交互重做，面板和輸入框分離，范圍選擇現(xiàn)可單獨(dú)選擇開始和結(jié)束時(shí)間。
• Table 默認(rèn)背景顏色從透明修改為白色。
• Tabs 火柴棍樣式縮短為和文字等長(zhǎng)。
• Tabs 交互重做，DOM 結(jié)構(gòu)改變。4.3.0

兼容性調(diào)整

• IE 最低支持版本為 IE 11。
• React 最低支持版本為 React 16.9，部分組件開始使用 hooks 進(jìn)行重構(gòu)。
  • 重構(gòu)通過 useMemo 進(jìn)行性能優(yōu)化，請(qǐng)勿使用 mutable data 作為參數(shù)。
• 最低支持的 less 版本為 3.1.0，建議升級(jí)到 less 4.x 最新版本。

移除廢棄的 API

• 移除了 LocaleProvider，請(qǐng)使用 ConfigProvider 替代。
• 移除了 Mention，請(qǐng)使用 Mentions 替代。
• 移除了 Alert 的 iconType 屬性，請(qǐng)使用 icon 替代。
• 移除了 Modal.xxx 的 iconType 屬性，請(qǐng)使用 icon 替代。
• 移除了 Form.create 方法，form 現(xiàn)可由 Form.useForm 獲取。
• 移除了 Form.Item 的 id 屬性，請(qǐng)使用 htmlFor 替代。
• 移除了 Typography 的 setContentRef 屬性，請(qǐng)使用 ref 替代。
• 移除了 TimePicker 的 allowEmpty 屬性，請(qǐng)使用 allowClear 替代。
• 移除了 Tag 的 afterClose 屬性，請(qǐng)使用 onClose 替代。
• 移除了 Card 的 noHovering 屬性，請(qǐng)使用 hoverable 替代。
• 移除了 Carousel 的 vertical 屬性，請(qǐng)使用 dotPosition 替代。
• 移除了 Drawer 的 wrapClassName 屬性，請(qǐng)使用 className 替代。
• 移除了 TextArea 的 autosize 屬性，請(qǐng)使用 autoSize 替代。
• 移除了 Affix 的 offset 屬性，請(qǐng)使用 offsetTop 替代。
• 移除了 Transfer 的 onSearchChange 屬性，請(qǐng)使用 onSearch 替代。
• 移除了 Transfer 的 body 屬性，請(qǐng)使用 children 替代。
• 移除了 Transfer 的 lazy 屬性，它并沒有起到真正的優(yōu)化效果。
• 移除了 Select 的 combobox 模式，請(qǐng)使用 AutoComplete 替代。
• 移除了 Table 的 rowSelection.hideDefaultSelections 屬性，請(qǐng)?jiān)?rowSelection.selections 中使用 SELECTION_ALL 和 SELECTION_INVERT 替代，自定義選擇項(xiàng)。
• 廢棄 Button.Group，請(qǐng)使用 Space 代替。

圖標(biāo)升級(jí)

在 antd@3.9.0 中，引入了 svg 圖標(biāo)。使用了字符串命名的圖標(biāo) API 無(wú)法做到按需加載，因而全量引入了 svg 圖標(biāo)文件，這大大增加了打包產(chǎn)物的尺寸。在 4.0 中，調(diào)整了圖標(biāo)的使用 API 從而支持 tree shaking，減少 antd 默認(rèn)包體積約 150 KB(Gzipped)。

舊版 Icon 使用方式將被廢棄：

import { Icon, Button } from 'antd';

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

4.0 中會(huì)采用按需引入的方式：

  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';

仍然可以通過兼容包繼續(xù)使用：

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

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

組件重構(gòu)

• Form 重寫
  • 不再需要 Form.create。
  • 嵌套字段支持從 'xxx.yyy' 改成 ['xxx', 'yyy']。
  • validateTrigger 不再收集字段值。
  • 遷移文檔請(qǐng)查看此處。
• DatePicker 重寫
  • 提供 picker 屬性用于選擇器切換。
  • 范圍選擇現(xiàn)在可以單獨(dú)選擇開始和結(jié)束時(shí)間。
  • onPanelChange 在面板值變化時(shí)也會(huì)觸發(fā)。
  • 自定義單元格樣式的類名從 ant-calendar-date 改為 ant-picker-cell-inner。
• Tree、Select、TreeSelect、AutoComplete 重新寫
  • 使用虛擬滾動(dòng)。
  • onBlur 時(shí)不再修改選中值，且返回 React 原生的 event 對(duì)象。
    • 如果你在使用兼容包的 Form 且配置了 validateTrigger 為 onBlur，請(qǐng)改至 onChange 以做兼容。
  • AutoComplete 不再支持 optionLabelProp，請(qǐng)直接設(shè)置 Option value 屬性。
  • AutoComplete 選項(xiàng)與 Select 對(duì)齊，請(qǐng)使用 options 代替 dataSource。
  • Select 移除 dropdownMenuStyle 屬性。
  • 如果你需要設(shè)置彈窗高度請(qǐng)使用 listHeight 來代替 dropdownStyle 的高度樣式。
  • filterOption 第二個(gè)參數(shù)直接返回原數(shù)據(jù)，不在需要通過 option.props.children 來進(jìn)行匹配。
  • Tree、TreeSelect 同時(shí)指定 title 和 label 的時(shí)候，會(huì)選擇顯示 label。為了 labelInValue 行為一致進(jìn)行了該調(diào)整。新行為（在第一個(gè)節(jié)點(diǎn)展示 ‘label’），舊行為（在第一個(gè)節(jié)點(diǎn)展示 ‘title’）。
  • Tree 傳入內(nèi)容采用 treeData 屬性，來代替 TreeNode 方式，TreeNode 依然可用，但是會(huì)在控制臺(tái)拋出警告。
• Grid 組件使用 flex 布局。
• Button 的 danger 現(xiàn)在作為一個(gè)屬性而不是按鈕類型。
• Input、Select 的 value 為 undefined 時(shí)改為非受控狀態(tài)。
• Table 重寫
  • 在沒有 columns 時(shí)仍然會(huì)保留一列。
  • 嵌套 dataIndex 支持從 'xxx.yyy' 改成 ['xxx', 'yyy']。
• Pagination 重寫
  • 自 4.1.0 起大于 50 條數(shù)據(jù)默認(rèn)會(huì)展示 pageSize 切換器，這條規(guī)則同樣會(huì)運(yùn)用于 Table 上。
  • onChange 方法在 pageSize 值改變時(shí)也會(huì)觸發(fā)。
• Tabs 重寫（4.3.0）
  • Dom 結(jié)構(gòu)變化，如有覆蓋樣式需要仔細(xì)檢查。
  • 橫向滾動(dòng)交互變化，onPrevClick 和 onNextClick 不再工作。
• less 變量變化，如 DatePicker/TimePicker/Calendar 相關(guān)變量已全部重構(gòu)，又如 @btn-padding-base 等進(jìn)行了重命名，具體變化請(qǐng)自行對(duì)比 3.x 變量 和 4.x 變量。

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