初識Ant-Design

設計價值觀

Ant-Design在設計方面，存在兩個大的價值觀，天然和肯定。天然即順其天然，在順應用戶的自我感知和行爲方式來開發更天然的產品。肯定即探索設計規律，並將其抽象成對象，減小設計者的主觀干擾，下降系統的不肯定性。還有模塊化設計，將複雜的或者相同的部分抽象成模塊，最終減小系統的複雜度，增進可靠性和可維護性。

Ant-Design的React實現

https://ant.design/docs/react/practical-projects-cn
先貼出地址來，上面還有不少東西沒學，今天作了一個應用Ant-Design的Table組件，瞭解了一些常見的Table組件的用法。

Table組件

• dataSource：須要傳遞給表格的數據，格式是一個數組
• columns：定義表格有哪些列，若是是靜態數據的話，只須要寫key，title，dataIndex屬性，若是是動態操做的話，還會有render屬性
• loading
  詳情請參照這個連接https://ant.design/components/table-cn/#components-table-demo-reset-filter

dva的八個概念

用戶經過在界面上進行操做，產生Action，而後在組件裏面對Action（好比是刪除delete操做）添加處理函數（handleDelete），在handleDelete函數裏面，調用dispatch函數來分發action，而後dva-cli命令會幫咱們建立models目錄，dva經過model的概念將一個領域的模型管理起來，包括同步更新state的reducers，處理異步邏輯的effects，訂閱數據源的subscriptions。有了model和component，還須要將這二者串聯起來，就是經過connect，connect相似於react-redux中的connect。
我簡單總結一下今天所學到的，在作上面這個表格，ui方面的話就是用的Ant-Design來作的樣式，其中也學到一些Table組件的相關用法。

• state：表示Model的狀態數據，一般表現爲一個JavaScript對象，在dva中能夠經過dva的實例屬性_store看到頂部的state數據，可是一般不多用到。
• Action：也是一個JavaScript對象，表示用戶的操做，包括type，payload等屬性
• dispatch函數：觸發action的函數，action是改變state的惟一途徑，這裏通常是在handleDelete函數裏面調用（處理用戶的操做）
• Reducer函數接受兩個參數：以前已經累積運算的結果和當前要被累積的值，返回的是一個新的累積結果。該函數吧一個集合歸併成一個單值。
• Effect：反作用，在應用中，稱爲異步操做。dva 爲了控制反作用的操做，底層引入了redux-sagas作異步流程控制，因爲採用了generator的相關概念，因此將異步轉成同步寫法，從而將effects轉爲純函數。
• Subscription：訂閱，用於訂閱一個數據源，而後根據條件dispatch的須要的action，數據源能夠是當前的時間、服務器的 websocket 鏈接、keyboard 輸入、geolocation 變化、history 路由變化等等。
• Router：這裏的路由一般指的是前端路由，因爲咱們的應用如今一般是單頁應用，因此須要前端代碼來控制路由邏輯，經過瀏覽器提供的 History API 能夠監聽瀏覽器url的變化，從而控制路由相關操做，dva 實例提供了 router 方法來控制路由，使用的是react-router

import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

• Route Components:在 dva 中，一般須要 connect Model的組件都是 Route Components，組織在/routes/目錄下，而/components/目錄下則是純組件（Presentational Components） 詳情請參照https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md