記一次AntDesign技術棧--React開發體驗

簡介

這是一個關於阿里團隊Ant Design關於react技術棧的開發體驗，

主要技術棧爲：react,typescript ,Umi.js,Dva.js......

在以前的工做中，更多時候個人技術選型是Vue或者Angular，但懷着學無止境的想法，在公司的新項目中決定使用React（畢竟大家都在吹！！）。在正式的項目開始前有必要先熟悉React的開發生態，因而基於AntDesign-Pro寫了一個小Demo。Demo雖小，但本人以爲仍是很好的囊括了一些從此開發會遇到的坑，因此有必要總結記錄下來。技術有限，有錯請罵，罵完就改。

目錄

• AntDesignPro
• typescript
• 路由
• Redux（Dva.js）
• 與服務器交互
• 代理
• yield

AntDesignPro 簡介

如下爲antdesignpro的目錄結構圖：

沒有什麼好說，上面那張圖就很詳細了。

typescript

     typescript並非一門新技術，不過是JavaScript的一個超集，解決了JavaScript一直被詬病的弱類型語言的問題。故在學習中不須要投入過多時間精力去學習它，如下是我以爲有必要特別學習的地方：

接口

     TypeScript的核心原則之一是對值所具備的結構進行類型檢查。在TypeScript裏，接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。

interface Mes{    str: string;}function hello(mes: Mes){    console.log(mes.str);}let mes = {    "str":"hello TypeScript"};hello(mes);複製代碼

泛型

要建立一個可重用的組件，其中的數據類型就必需要兼容不少的類型，那麼如何兼容呢，TypeScript提供了一個很好的方法：泛型

function Test<T>(param: T): T{  return param}複製代碼

路由

       AntDesignPro使用的路由爲通過Umi.js封裝過的路由（其實就是加了層毫無心義封裝）。

UmiJs會自動生成約定式路由，但若是你傾向於使用配置式的路由，也能夠配置routes。

配置位置爲：

routes.ts：

exports.routeOBJ = [  {    path: '/login',    component: '../layouts/main/main',  },  {    path: '/',    component: '../layouts/main/main',    routes:[      {        path:'/',        redirect:'/discover/recommend'      },      {        path:'/discover/recommend',        component:'./discover/recommend'      }    ]  },];複製代碼

在此我曾深陷一個巨坑之中沒法自拔，在routes中，path：'/login' 路由必須放在path：‘/ ’前，不然不管你如何跳轉，你都跳轉不到login！！

Redux（DvaJs）

就像是Vue中的Vuex同樣，Redux作着跟Vuex同樣的工做，只是在AntDesignPro中使用的是DvaJS（又是一個瞎**封裝）。

這裏只是大概講一下Redux的應用，詳細的API講解之後再說。

首先記住如下代碼：

connect(({ playlist }: ConnectState) => ({  playlist,}))(login);複製代碼

這段代碼的做用就是將redux裏model的數據映射到login這個reactComponent的Props中，這樣你就可使用this.props.dispatch,以下：

this.props.dispatch({        type: 'playlist/fetchPlayList',        callback:res=>{          console.log(res);          this.state.hot_recommend = res.playlists.slice(0,8)        }      });複製代碼

巨坑來了！！在使用this.props.dispatch時請千萬注意不要在render（）{}裏面直接使用，後果就是會一直死循環的執行直到你的小破本死機（別問我怎麼辦，問就是重啓）。若是你要在頁面初始化的時候調用，那請放在componentDidMount和（）或者其餘勾子函數中。

與服務器交互

在 Ant Design Pro 中，一個完整的前端 UI 交互到服務端處理流程是這樣的：

1. UI 組件交互操做；
2. 調用 model 的 effect；
3. 調用統一管理的 service 請求函數；
4. 使用封裝的 request.ts 發送請求；
5. 獲取服務端返回；
6. 而後調用 reducer 改變 state；
7. 更新 model。

這種模式看起來很繁瑣，但其實否則。剛接觸的時候確實有些排斥，但當你接受了這種看似不友好的流程後，你會發現你的項目結構極其明朗。

先是Service.ts,使用封裝好的函數request定義接口

import request from '@/utils/request';export async function playlist(): Promise<any> {  return request('/server/top/playlist');}複製代碼

在Models中經過異步機制調用接口函數

effects: {    *fetchPlayList({_,callback}, { call, put }) {      console.log('playlist');            const response = yield call(playlist);      if (callback && typeof callback === 'function') {          callback(response)    }      yield put({        type: 'savePlaylist',        payload: response,      });    },  },複製代碼

在你的react頁面中通this.props.dispatch調用model中的函數及可完成與服務器的對接。

this.props.dispatch({        type: 'playlist/fetchPlayList',        callback:res=>{          console.log(res);        }      });複製代碼

代理

AntDesignPro的代理放在裏config裏面：

Yield

在上面的models代碼中，必定會出現yield，熟悉es6的同窗確定知道它的做用。yield是ES6的新關鍵字，使生成器函數執行暫停，yield關鍵字後面的表達式的值返回給生成器的調用者。

yield沒法單獨工做，須要配合generator(生成器)的其餘函數

function* test(){        console.log(0);          yield console.log(1);          yield console.log(1);          yield console.log(1);        }      test() //// 沒有輸出
      test().next() /// 0 1複製代碼

yield在生成器中的做用相似與斷點，而next()則是打開這個斷點的惟一鑰匙，一個next()打開一層以此類推。

結尾

使用這套技術棧有時候確實很給人添堵，有時候就是有種山路十八彎的感受。但整體體驗還算能夠，項目工程化的思想很好，組件的封裝也很簡潔（徹底看不懂）。這個小demo也算是React技術棧的起步吧，寫篇小文總結一下。