前言
因工作需要，最近在努力學習react全家桶相關內容，最近發現阿里有個dva項目，是基於redux,redux-sage和react-router 的一個輕量級框架，跟着網上一個整合demo坐下來后，打算寫一下整個系統的分析，以備日后查看。
系統分析
概述
整個項目使用 react+dva+antd 的技術棧，主要實現了一個CURD 的應用。功能不復雜，主要是熟悉這個技術棧的思維方式。
入口
項目的入口文件為 index.js文件。 在該文件中首先實例化一個dva應用，然后設置該應用的model和router，最后啟動（start） 在model中主要用來編寫整個應用的業務邏輯，包括redux的整個流程，同步、異步獲取數據等操作。 在router中底層應該是使用了react-router來負責整個系統的路由，然后在路由中配置各自路由對應的頁面，也就是組件（components）
model
model類似於mvc結構中控制器的角色，其中主要有五個配置項。
- namespace
model 的命名空間，同時也是他在全局 state 上的屬性，只能用字符 串，不支持通過 . 的方式創建多層命名空間。 - state
state的初始值，優先級低於傳給 dva() 的 opts.initialState。 - reducers key/value 格式定義 reducer，用於處理同步操作，唯一可以修改 state 的地方。由 action 觸發
- effects
以 key/value 格式定義 effect。用於處理異步操作和業務邏輯，不 直接修改 state。由 action 觸發，可以觸發 action，可以和服務 器交互，可以獲取全局 state 的數據等等。 - subscrip
以 key/value 格式定義 subscription。subscription 是訂 閱，用於訂閱一個數據源，然后根據需要 dispatch 相應的 action。在 app.start() 時被執行，數據源可以是當前的時間、服 務器的 websocket 連接、keyboard 輸入、geolocation 變化、 history 路由變化等等。
簡單來說，就是在state中設置初始化的組件狀態，在reduce中處理同步的action，在effect中處理異步的action，並發出同步的action去更新state。最后可以在subscrip中添加事件監聽等操作。
service
service 模塊負責的內容同一班意義上的一樣，就是用來獲取數據的服務，可以把跟服務器通訊的代碼放到這里來。
router
配置路徑對應的組件，也就是不同路徑下展示不同的頁面。
組件
一個常規的react，用來將model中的state映射到組件的prop上並展示。
后記
整個dvademo看下來，對於一個比較熟悉react全家桶的人來說，相對於原來那一套redux+redux-saga+react確實簡化許多，但如果不是很熟悉上面提到的那些東西，看這個demo的時候可能會一頭霧水。 總而言之，dva大大方便了熟手的開發進度，減少了煩冗的代碼，但是學習曲線還是過於陡峭，不是很適合上手。
參考 【https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md#model】 【https://github.com/sorrycc/blog/issues/18】