使用ant design Pro開發項目的小結

1、關於上手。

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能夠查閱

2、使用ant design Pro 

以一個ant design Table組件展現數據爲例。

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

1、新建一個頁面。

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

2.新增一條以後，須要去對應的路徑新建頁面。通常都放在routes文件夾中

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

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

2、數據交互。

這個表格頁面使用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文檔，心中應該略知一二。此處只介紹了一個很粗略的開發流程，後續我會詳細講解。

3、我的開發思想及心得

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接口地址、可否再進行封裝達到動態的目的呢？這樣連修改接口的重複工做也省了。

感謝閱讀。