antd@4 rc 發布已經有一段時間了（大概已經兩周了），官網^[1] 也已同步放出。最為一個酷愛嘗鮮的人，當然要第一時間安裝升級。第一時間享受到了的 antd@4 各種優勢。

升級點

首先對我而言最大的改進在于性能，select ，table 和 tree 已經全面支持了虛擬滾動，作為了早早的使用了 rc-tree來解決性能問題的人，antd@4 中提供自然是更好不過了，畢竟自己寫樣式和動態是非常復雜的。

重寫的 table 和 from 解決很多遺留的疑難雜癥，具體可以查看豆醬老師的 antd@4 系列文章^[2]，里面詳細寫了心路歷程，在 form 中我們不需要使用 getFieldDecorator 和 Form.create 這兩個方法。已 Pro 全區塊為例，這兩個方法分別出現了 87 和 22次，在我自己的一個維護項目中找到了142 個 getFieldDecorator ，更不用說為了封裝組件 getFieldDecorator 被當成 props 傳來傳去的造成的各種復雜性提升了。在 v4 中我們終于可以擺脫它了。

 

瞧這都是刪除的 diff

Table 現在也可以自動的獲得寬度，并且擁有更加優秀的固定到側邊，已 Pro-Table^[3] 為例，這里是 3.0 的 table。

 

在 4.0 中，不會發生高度錯位的問題。

 

 遷移方法

antd@4 變得更加多才多藝，帶來了巨量的提升，那我們怎么才能使用到這么棒的 4.0 呢 , 其實很簡單，Pro 已經全部遷移了一把^[4] 。官方貼心的為我們提供了 codemod-v4，使用起來也是非常簡單。

# 通過 npx 直接運行
npx -p @ant-design/codemod-v4 antd4-codemod src

# 或者全局安裝
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4

# 運行
antd4-codemod src

值得注意的是 如果項目中使用了 <Icon type={type} /> 會轉化成 LegacyIcon，這里需要檢查一下，如果你不是組件庫你一定是不需要 LegacyIcon，遷移之后一定要刪除它，不然會造成圖標文件被全量打入，它可是有 540K 左右的大小。

為了更加的語義化，icon 將從 i 標簽修改為 span 標簽，改完之后需要記得去查看一下有沒有類似 i{}，i.anticon 等用法，如果有可以修改為 span{}, span.antion 來保證遷移完成的樣式問題。

另外由于 form 不兼容，codemod 不會自動幫你遷移到新的寫法， 但是遷移到兼容包 @ant-design/compatible 方便在和新版本一起使用，而不用完全遷移。兼容包中 ant-from 類名將會更新為 ant-legacy-form ，如果你修改了 form 的默認樣式記得檢查一下，并且修改它。

如果碰到表單無法撐開的問題可以加入下面的代碼：

:global {
  .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
     width: 100%;
   }
}

 Pro中使用

Pro 在第一時間也遷移了 antd@4 ，我們只需要在 create umi 中選擇 ant-design-pro，即可獲得最新的 4.0 分支代碼。

??? create-umi
? Select the boilerplate type ant-design-pro
? ???? Which language do you want to use? TypeScript
? ???? Want to use better and faster antd? Yes
>
> 使用 antd 4.0 可能會有一些兼容性問題，閱讀下面的文檔了解具體的改動
> There may be some compatibility issues when using antd 4.0. Read the following documents for specific changes
> https://next.ant.design/docs/react/migration-v4-cn
>

如果你想獲得遷移到新的版本，可以按照上面的文檔描述實現，但是 Pro 中支持通過設置 icon 配置菜單圖標，在 4.0 中將無法得到支持，所以我們提供了相應的插件^[5]來保留此功能。

使用方式如下 :

yarn add umi-plugin-antd-icon-config -D

并且在 config.ts 中設置

export default {
  plugins:[['umi-plugin-antd-icon-config', {}]],
}

無痛遷移 antd@4 就是這么簡單。所有的官方區塊也已經支持了 antd@4，請大家安心使用。如果想使用 antd 的 新特性，不打包全部的 icon， 可以嘗試升級 ProLayout@5.0。

由于 4.0 的 icon 有一些刪改，如果發現圖標消失，請在 antd 官網中尋找合適的進行替換。