一、關於上手。
1. 關於ant design Pro的介紹，自己看官網，大致上可以理解為ant design（元件庫） + ant design Pro （完整的專案）+ dva（路由+資料流管理）的組合拳。總之這個Pro是一個已經幫你打通了從搭建到測試打包釋出的一整套完整的專案，你只需要站在巨人的肩膀上開發就好了。
2. 按照官網安裝好專案之後，就能看到幾個頁面。進行開發之前，你需要一定的react語法、Js(ES6)、dva的基礎。啥？全家桶都不會？沒關係，寫頁面又不需要你精通全家桶，看完以下連結就開始寫頁面吧，遇到不會的再去查，這樣學比較快。請按照以下順序食用
二、使用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介面地址、能否再進行封裝達到動態的目的呢？這樣連修改介面的重複工作也省了。
感謝閱讀。