react項目antd3升級到antd4

　　使用vue開發管理類的平台，大多數選擇elementui，react開發的話，大部分就離不開antd這個生態鏈龐大的組件庫。antd4的版本在2019年下旬開始出現，之后成為穩定版本，所以前兩年的老項目的話，基本上都是在使用3的版本，逐漸3的版本也更新比較少，開源庫用的人比較多了，就也會暴露出各種各樣的問題，所以從用戶體驗以及開發性能等考慮，還是有必要把3的版本升級到4的。官網里有升級教程，當然官方教程一般是涵蓋不住實際升級過程中遇到的各式各樣的問題，針對我就結合官方升級步驟以及升級過的項目遇到的一些問題做一個簡單的總結～

一. 升級步驟

　　1.准備工作

　　正式升級之前有一些對項目react版本的要求，以及如果舊項目的antd版本更低的一些情況，本文主要說3到4的升級所以這里就不詳細說啦，官網有說明，具體參考鏈接：https://ant.design/docs/react/migration-v4-cn。

　　2.借助ant-design/codemod-v4進行升級操作

　　這里官網也有說明，可以手動修改，也可以使用工具修改，這里我們當然是選擇方便的，借助工具，

 

　　我就直接運行安裝，npx -p @ant-design/codemod-v4 antd4-codemod src（插件包的具體內容如果想了解，鏈接 https://github.com/ant-design/codemod-v4），我這種情況就是所有都自動處理好了（下圖），沒出現什么問題，如果有問題的話會提示出來手動修改即可～另外，這里antd4-codemod src這里的src是要自動改檢測升級的項目文件名稱，我們一般都是在src的，但是如果有跟src同級的需要修改的目錄名，比如lib，就要再運行 antd4-codemod lib。

 　　3.重新安裝antd相關依賴

　　安裝完升級工具並運行之后，需要重新安裝一下最新版本的antd，運行 yarn add antd 即可，如果用到icon需要安裝 @ant-design/compatible（但是圖標這里有個小問題，后邊說～），這里安裝完之后項目就可以正常運行了（一般情況～～）。

二. 影響體驗的問題

　　第一部分的安裝步驟官網中基本都有說明，這里說一些別的問題，樣式問題（影響用戶體驗），控制台報warning的問題（影響開發體驗）。

　　1.Icon的warning

　　一般情況下我們的管理平台都會有菜單，菜單一般都會有icon，像這樣，多數情況下我們會把icon的type放到menu的配置里，類似於這樣：

              

使用的時候在頁面引入：import { Icon } from 'antd';使用在循環中直接使用： <Icon type={item.icon} /> ，這樣就可以，升級之后，會處理成頁面中引入：import { Icon as LegacyIcon } from '@ant-design/compatible';，使用變成了：<LegacyIcon type={item.icon} />，這樣雖然是可以正常運行，但是我們可以在控制台看到報錯：

 

 　　看antd4的文檔我們可以發現，圖標升級成了單獨的圖標庫，並且沒有了type屬性，變成了類似這樣的：<StepBackwardOutlined />使用方法，查了一下，解決方法如下：

　　(1) 把icon的type改為antd4中的組件名，例如使用<StepBackwardOutlined />，將icon設置為‘StepBackwardOutlined’；

　　(2)使用的時候把icon引入，import * as Icon from '@ant-design/icons';使用React.createElement創建動態icon。

  

 

　　2.table的warning

　　當我們在使用table的時候，用過都知道要有一個rowKey的屬性，並且一般前端都是如果數據中沒有唯一鍵，就會使用index，這個報錯就是不能使用index，這個解決就是設置一個rowKey即可。

 　　3.部分組件class更改影響的樣式問題

　　如果我們有使用組件本身的class自定義樣式就要注意一下這里，目前我用到的class有：

　　.ant-legacy-form -> .ant-legacy-form

　　.ant-select-selection -> .ant-select-selector

 

*其它

　　另外有用到form表單的地方，雖然說插件會使用 import { Form } from '@ant-design/compatible';可以使form正常使用，但同時我們也會在控制台看到警告：

 

 但是一般form表單都設計的會比較復雜，這里如果有時間的話還是可以根據antd4的form使用方法改一下，如果比較緊急還是可以用，但是這里要注意一點，如果是改成了antd4的form，樣式組件的class還是要改回ant-form。另外ant-design/compatible中的form發現一個bug，就是設置formItem的htmlFor屬性不生效，這樣的話如果要把formItem的label設置為選擇項等用戶可交互的就沒辦法操作，一點擊就會聚焦到后邊的表單控件里，比如說這樣的，表現為選擇創建時間/更新時間時，焦點自動聚焦到日期選擇框上，沒有辦法選擇，這樣就只能把表單改為antd4的了。另外這些警告在本地才會有，上線之后是沒有的，所以就還好吧偷個懶的話。。如果在升級過程中有別的問題或者解決方案歡迎交流～