react實例：理解dva構建項目的原理

請點擊相應的步驟查看詳情

咱們首先搭建一個 dva Demo  項目（請參考react快速構建一個應用項目），而後逐步完成如下內容：

1. 結構劃分
2. 設計 Model
3. 組件設計方法
4. 組件設計實踐
5. 添加 Reducers
6. 添加 Effects
7. 定義 Service
8. mock 數據
9. 添加樣式
10. 設計佈局

第一步，咱們會劃分一下總體的項目結構，熟悉每一部分是什麼概念；接下來咱們會說如何抽離 model，以及 model 設計的一些思路；而後咱們會根據項目的狀況說明如何合理的設計你的組件，以及組件中樣式的處理；在設計好了組件以後，就會進入數據相關的內容，包含了同步和異步的狀況，以及異步請求的處理方式，在最後咱們還會介紹在dva中mock數據的的方式以及佈局的設計。

 在 dva 架構的項目中，咱們推薦的目錄基本結構爲：

.
├── /mock/           # 數據mock的接口文件 ├── /src/ # 項目源碼目錄 │ ├── /components/ # 項目組件 │ ├── /routes/ # 路由組件（頁面維度） │ ├── /models/ # 數據模型 │ ├── /services/ # 數據接口 │ ├── /utils/ # 工具函數 │ ├── route.js # 路由配置 │ ├── index.js # 入口文件 │ ├── index.less │ └── index.html ├── package.json # 項目信息 └── proxy.config.js # 數據mock配置

 

最終咱們獲得的項目是這樣的：

詳情請參考：https://github.com/dvajs/dva-docs