一、關(guān)于上手。

1. 關(guān)于ant design Pro的介紹，自己看官網(wǎng)，大致上可以理解為ant design（組件庫） ant design Pro （完整的項(xiàng)目） dva（路由 數(shù)據(jù)流管理）的組合拳?？傊@個(gè)Pro是一個(gè)已經(jīng)幫你打通了從搭建到測(cè)試打包發(fā)布的一整套完整的項(xiàng)目，你只需要站在巨人的肩膀上開發(fā)就好了。

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

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

二、使用ant design Pro?

以一個(gè)ant design Table組件展示數(shù)據(jù)為例。

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

一、新建一個(gè)頁面。

1.在路由中新建一條頁面的配置。先不要管報(bào)錯(cuò)，因?yàn)槁酚蓪?duì)應(yīng)的component和models你還沒有，繼續(xù)往下看。

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

例如我新建了一個(gè)角色管理的頁面，使用connect進(jìn)行關(guān)聯(lián)models。

3.然后再去models文件夾中新建一個(gè)model層文件，注意namespace要對(duì)應(yīng)connect的component

二、數(shù)據(jù)交互。

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

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

1.使用生命周期函數(shù)componentDidMount在組件掛載時(shí)，去請(qǐng)求表格的數(shù)據(jù)。這里發(fā)起一個(gè)dispatch 觸發(fā)action，type的值就是models層中的。

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

此處response拿到服務(wù)端返回的結(jié)果。你可以在此處對(duì)數(shù)據(jù)進(jìn)行處理。比如后端返回的并非是你需要的數(shù)據(jù)格式，或者你可以進(jìn)行更高層次的封裝。

3.再調(diào)用reducers中的save方法將數(shù)據(jù)存儲(chǔ)。通過在UIcomponent中已經(jīng)進(jìn)行關(guān)聯(lián)，此時(shí)this.props能夠取到你傳送過去的數(shù)據(jù)。然后放入Table組件即可。

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

三、個(gè)人開發(fā)思想及心得

1.在使用這套框架開發(fā)幾個(gè)頁面之后會(huì)明顯感覺到，框架有點(diǎn)像MVC分層，十分規(guī)范！

M層models負(fù)責(zé)控制數(shù)據(jù)

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

C層control，我個(gè)人理解為是api層的管理，將所有的需要請(qǐng)求后臺(tái)數(shù)據(jù)的接口統(tǒng)一起來，很直觀也方便調(diào)用和修改。

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

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

首先，我會(huì)封裝一個(gè)函數(shù)，函數(shù)接收各種字段。比如后端返回一系列的input各種類型的字段給你，你在函數(shù)中對(duì)字段進(jìn)行匹配，每個(gè)字段對(duì)應(yīng)到ant design的組件，將數(shù)據(jù)與組件關(guān)聯(lián)，然后return這個(gè)組件。最后將所有的組件push到一個(gè)數(shù)組中，然后放入render函數(shù)，即可渲染出整個(gè)頁面。

這個(gè)函數(shù)有點(diǎn)類似于React的HOC高階組件（傳組件和props進(jìn)去，rerurn新的組件出來）概念，區(qū)別是我這里傳入的是每個(gè)組件所需的數(shù)據(jù)而非組件，而return出的是一個(gè)組件。

3.多利用無狀態(tài)組件、函數(shù)組件。表格上最后一行，編輯/刪除按鈕。我是在models層進(jìn)行處理的，因?yàn)閏olumns（Table組件的數(shù)據(jù)對(duì)象）在UIcomponents層已經(jīng)進(jìn)行渲染了，個(gè)人認(rèn)為UI組件應(yīng)該盡量簡化，它只負(fù)責(zé)渲染數(shù)據(jù)。我在models層中將columns中的數(shù)據(jù)進(jìn)行遍歷，在本地構(gòu)建一個(gè)對(duì)象（編輯按鈕組件、刪除按鈕組件）與服務(wù)端返回的對(duì)象進(jìn)行合并。同時(shí)，兩個(gè)按鈕的組件應(yīng)該本身具備自有的功能，比如在任何一個(gè)表格中調(diào)用該組件即可使用其功能。合并后將新的colums對(duì)象丟給表格組件，這樣進(jìn)行了一個(gè)小小的抽象。

在表格上方的按鈕，同樣是通過函數(shù)來輸出的按鈕組件。按鈕具有各自的屬性、功能，通過入?yún)韨鬟f給函數(shù)，然后通過props設(shè)置給組件，來達(dá)到復(fù)用的目的。

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

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

希望各位大佬們多多指教。如何進(jìn)行更高層次的封裝呢？每個(gè)頁面需要對(duì)應(yīng)路由、models、api接口地址、能否再進(jìn)行封裝達(dá)到動(dòng)態(tài)的目的呢？這樣連修改接口的重復(fù)工作也省了。

感謝閱讀。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。