如何進(jìn)行遷移antd@4

antd@4 rc 發(fā)布已經(jīng)有一段時(shí)間了（大概已經(jīng)兩周了），官網(wǎng)^[1] 也已同步放出。最為一個(gè)酷愛嘗鮮的人，當(dāng)然要第一時(shí)間安裝升級(jí)。第一時(shí)間享受到了的 antd@4 各種優(yōu)勢(shì)。

升級(jí)點(diǎn)

首先對(duì)我而言最大的改進(jìn)在于性能，select ，table 和 tree 已經(jīng)全面支持了虛擬滾動(dòng)，作為了早早的使用了 rc-tree來(lái)解決性能問(wèn)題的人，antd@4 中提供自然是更好不過(guò)了，畢竟自己寫樣式和動(dòng)態(tài)是非常復(fù)雜的。

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

 

瞧這都是刪除的 diff

Table 現(xiàn)在也可以自動(dòng)的獲得寬度，并且擁有更加優(yōu)秀的固定到側(cè)邊，已 Pro-Table^[3] 為例，這里是 3.0 的 table。

 

在 4.0 中，不會(huì)發(fā)生高度錯(cuò)位的問(wèn)題。

 

 遷移方法

antd@4 變得更加多才多藝，帶來(lái)了巨量的提升，那我們?cè)趺床拍苁褂玫竭@么棒的 4.0 呢 , 其實(shí)很簡(jiǎn)單，Pro 已經(jīng)全部遷移了一把^[4] 。官方貼心的為我們提供了 codemod-v4，使用起來(lái)也是非常簡(jiǎn)單。

# 通過(guò) npx 直接運(yùn)行
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

# 運(yùn)行
antd4-codemod src

值得注意的是 如果項(xiàng)目中使用了 <Icon type={type} /> 會(huì)轉(zhuǎn)化成 LegacyIcon，這里需要檢查一下，如果你不是組件庫(kù)你一定是不需要 LegacyIcon，遷移之后一定要?jiǎng)h除它，不然會(huì)造成圖標(biāo)文件被全量打入，它可是有 540K 左右的大小。

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

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

如果碰到表單無(wú)法撐開的問(wèn)題可以加入下面的代碼：

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

 Pro中使用

Pro 在第一時(shí)間也遷移了 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 可能會(huì)有一些兼容性問(wèn)題，閱讀下面的文檔了解具體的改動(dòng)
> 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
>

如果你想獲得遷移到新的版本，可以按照上面的文檔描述實(shí)現(xiàn)，但是 Pro 中支持通過(guò)設(shè)置 icon 配置菜單圖標(biāo)，在 4.0 中將無(wú)法得到支持，所以我們提供了相應(yīng)的插件^[5]來(lái)保留此功能。

使用方式如下 :

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

并且在 config.ts 中設(shè)置

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

無(wú)痛遷移 antd@4 就是這么簡(jiǎn)單。所有的官方區(qū)塊也已經(jīng)支持了 antd@4，請(qǐng)大家安心使用。如果想使用 antd 的 新特性，不打包全部的 icon， 可以嘗試升級(jí) ProLayout@5.0。

由于 4.0 的 icon 有一些刪改，如果發(fā)現(xiàn)圖標(biāo)消失，請(qǐng)?jiān)?antd 官網(wǎng)中尋找合適的進(jìn)行替換。