一、關于上手。

1. 關于ant design Pro的介紹，自己看官網，大致上可以理解為ant design（組件庫） ant design Pro （完整的項目） dva（路由 數據流管理）的組合拳。總之這個Pro是一個已經幫你打通了從搭建到測試打包發布的一整套完整的項目，你只需要站在巨人的肩膀上開發就好了。

2. 按照官網安裝好項目之后，就能看到幾個頁面。進行開發之前，你需要一定的react語法、Js(ES6)、dva的基礎。啥？全家桶都不會？沒關系，寫頁面又不需要你精通全家桶，看完以下鏈接就開始寫頁面吧，遇到不會的再去查，這樣學比較快。請按照以下順序食用

• dva知識地圖
  
• js快速預覽
  
• react快速預覽
  
• react小書
  
• dva文檔
  
• react中文文檔
  
• ES6
• MDN ？？？ MDN有什么好看的？如果你js不太熟，MDN有很全的API可以查閱

二、使用ant design Pro?

以一個ant design Table組件展示數據為例。

這樣一個頁面，可以看到：左邊是導航欄menu組件，右邊是主體BasicLayout組件。至于什么是layout，同樣，在ant design Pro官網找得到。當你剛安裝好antdp的時候已經有幾個頁面可以參考了。此處：在頁面中，有幾個按鈕，按鈕下方是ant design 的Table組件。

一、新建一個頁面。

1.在路由中新建一條頁面的配置。先不要管報錯，因為路由對應的component和models你還沒有，繼續往下看。

2.新增一條之后，需要去對應的路徑新建頁面。一般都放在routes文件夾中

例如我新建了一個角色管理的頁面，使用connect進行關聯models。

3.然后再去models文件夾中新建一個model層文件，注意namespace要對應connect的component

二、數據交互。

這個表格頁面使用antd 的table 組件，自己去官網拷貝代碼。這里不再贅述。主要提一下，數據是怎樣交互的。

Table組件里面的行數據就是是columns，它有自己的數據格式，你需要把數據格式轉換成他規定的那種。在剛裝好的項目中有表格的例子你可以參考一下，只不過案例是寫死的靜態數據。試試看：你把columns里面的數據刪除掉，然后從外部獲取到數據替換掉。

1.使用生命周期函數componentDidMount在組件掛載時，去請求表格的數據。這里發起一個dispatch 觸發action，type的值就是models層中的。

2.在models中會使用antd封裝好的方法去請求api.js中定義好的接口地址，然后等待返回就可以處理數據。

此處response拿到服務端返回的結果。你可以在此處對數據進行處理。比如后端返回的并非是你需要的數據格式，或者你可以進行更高層次的封裝。

3.再調用reducers中的save方法將數據存儲。通過在UIcomponent中已經進行關聯，此時this.props能夠取到你傳送過去的數據。然后放入Table組件即可。

此處可能講得不是很詳細，比如上述代碼各種方法是做什么用的，如果你有仔細看過文章開頭列舉的文檔，尤其是dva文檔，心中應該略知一二。此處只介紹了一個很粗略的開發流程，后續我會詳細講解。

三、個人開發思想及心得

1.在使用這套框架開發幾個頁面之后會明顯感覺到，框架有點像MVC分層，十分規范！

M層models負責控制數據

V層UIComponent ，and design以及為你準備了豐富的組件庫。

C層control，我個人理解為是api層的管理，將所有的需要請求后臺數據的接口統一起來，很直觀也方便調用和修改。

2.ant design Pro幾乎已經為你做好了一切，你只需要替換數據、接口，開箱即用。在你切完數個頁面之后會發現一個問題：如何進行更高層次的封裝呢？不能每次都要復制粘貼很多重復的組件代碼呢？

我個人是這樣做的：比如說上面舉例的表格頁面。

首先，我會封裝一個函數，函數接收各種字段。比如后端返回一系列的input各種類型的字段給你，你在函數中對字段進行匹配，每個字段對應到ant design的組件，將數據與組件關聯，然后return這個組件。最后將所有的組件push到一個數組中，然后放入render函數，即可渲染出整個頁面。

這個函數有點類似于React的HOC高階組件（傳組件和props進去，rerurn新的組件出來）概念，區別是我這里傳入的是每個組件所需的數據而非組件，而return出的是一個組件。

3.多利用無狀態組件、函數組件。表格上最后一行，編輯/刪除按鈕。我是在models層進行處理的，因為columns（Table組件的數據對象）在UIcomponents層已經進行渲染了，個人認為UI組件應該盡量簡化，它只負責渲染數據。我在models層中將columns中的數據進行遍歷，在本地構建一個對象（編輯按鈕組件、刪除按鈕組件）與服務端返回的對象進行合并。同時，兩個按鈕的組件應該本身具備自有的功能，比如在任何一個表格中調用該組件即可使用其功能。合并后將新的colums對象丟給表格組件，這樣進行了一個小小的抽象。

在表格上方的按鈕，同樣是通過函數來輸出的按鈕組件。按鈕具有各自的屬性、功能，通過入參來傳遞給函數，然后通過props設置給組件，來達到復用的目的。

最后，頁面上有哪些組件、哪些按鈕該如何規定呢？你需要和后端協商好字段、屬性，比如一個表單頁面有很多種input類型，input會有type、rules（驗證規則）....后端返回給你一段組件所需的屬性之后，你根據這些數據即可渲染出整個頁面的組件。

以上是本人萌新使用ant design Pro的小小經驗，可能創建頁面的案例講的不太清晰、抽象封裝的思想不知道各位能否明白我所說的。

希望各位大佬們多多指教。如何進行更高層次的封裝呢？每個頁面需要對應路由、models、api接口地址、能否再進行封裝達到動態的目的呢？這樣連修改接口的重復工作也省了。

感謝閱讀。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的使用ant design Pro开发项目的小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。