經過前面四篇的鋪墊，終於輪到我們的主角dva了，就是下面這個美女：
先擦一擦哈喇子，我們來介紹一下，dva出自於暴雪出品的一款遊戲《守望先鋒》，援引官方的角色介紹：
d.va擁有一部強大的機甲，它具有兩台全自動的近距離聚變機炮、可以使機甲飛躍敵人或障礙物的推進器、 還有可以抵禦來自正面的遠端攻擊的防禦矩陣。然後呢，螞蟻金服的一位架構師sorrycc很迷這位美女，正巧剛開發了一款前端框架沒有名字，作為乙個向女神獻禮的專案，dva框架就此誕生。
實際上，dva只是基於現有開源框架的一層輕量封裝，並沒有引入任何新概念：
再來看一下框架圖，是不是都是熟悉的配方，熟悉的味道？
當然，也不是完全沒有新東西，其中有乙個subscription好像之前沒有見過，這是一種資料來源訂閱機制，資料來源可以是鍵盤輸入事件、路由變化、伺服器的 websocket 連線等等。你可以在資料發生變化時收到通知，並派發必要的action。
實際上，dva是乙個整合者，它的目標是解決「code is everywhere」問題。當我們同時使用上面這些框架時，一般會呈現下面這種型別的檔案結構：
+ src
+ sagas
- user.js
+ reducers
- user.js
+ actions
- user.js
另一方面，dva還試圖隱藏一些經常重複書寫的routine**，讓開發者能夠更加專注於業務邏輯。比如我們寫乙個應用的入口檔案，需要做下面這麼多事情：
實際上，可能95%以上的專案中這些**都是一模一樣的，我們不需要每次都花費時間來重新寫一遍這些**。
下面開始正式介紹dva 1.0相關的內容，dva 2.0做了一些優化公升級，後面專門有一節介紹具體變化。
router：即react-router中的
export default ,
subscriptions: ) );
}});
},},
effects: , ) = yield call(apis.fetchtxs)
yield put()
},},
reducers: ) ;
},},
}
下面這個鏈結展示了5步建立單頁應用的例子：
這個主要是從**結構上來劃分的，一般分為下面4類模組：
route：各種container（這個名字取得不太好）
另外，由於dva 1.0使用的是react-router v3，所以最外層還有乙個router.js用於配置靜態路由。所以一般的目錄結構如下所示：
+ src/
+ services/
- users.js
+ models/
- users.js
+ components/
+ users/
- users.js
- users.css
+ routes/
- users.js
- router.js
+ src/
+ models/
- global.js
+ pages/
+ users/
+ index.js
+ services
- users.js
+ models/
- users.js
+ components/
+ users/
- users.js
- users.css
前面提到過乙個api可以註冊「外掛程式」，所謂外掛程式就是一些生命週期「鉤子（hooks）」，可以在事件發生時做一些額外處理。包括下面這些型別的鉤子：
乙個比較典型的例子是頁面載入資料時轉圈圈，載入完畢後隱藏，這是乙個很多地方都需要用到的場景。官方提供了乙個dva-loading外掛程式，可以自動在非同步請求資料時把loading設定為true，獲得資料後把loading設定為false。這樣你就可以在元件中繫結loading實現轉圈圈的自動控制了：
// index.js
import createloading from 'dva-loading';
// components
function mapstatetoprops(state) = state.users;
return ;
}
直接使用redux+saga的流程如下所示：
使用dva時的流程如下所示：（觸發effect為例）
目前dva已經進化到2.0版本，除了採用了react-router v4以外，還有一些細節上的變動：
具體細節可以參見：
參考：前端技術棧使用整理
前端架構 技術棧 node webpack vueiview axios 架構框架 核心 iview admin 架構框架2 react ant design umi其他元件 vue cli service 腳手架 vuex vue router echarts 軟體webstorm vscode ...
TICK技術棧（五）Kapacitor安裝及使用
官方文件 因為我這邊系統是centeros的所以選的centeros 因為我這邊系統是centeros的所以選的centeros wget安裝 sudo yum localinstall kapacitor 1.5.3.x86 64.rpm 安裝成功！啟動 sudo systemctl start ...
基於redux的前端框架dva入門教程
預設輸出檔案。預設輸出 react router 介面，react router redux 的介面通過屬性 routerredux 輸出。比如 import from dva router 非同步請求庫，輸出 isomorphic fetch 的介面。不和 dva 強繫結，可以選擇任意的請求庫。輸...