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'],
    },
  ]}
/>