Dva.js 入門級教學文件-1
Dva.js 入門級教學文件-1
- 簡介
- 一、介紹
- 1、什麼是 dva
- 2、dva 的作用是什麼
- 二、環境搭建和使用
- 1、環境搭建
- 2、建立專案
- 3、使用 antd
- 三、全域性架構
- 1、index.js(重點)
- (1)、建立 dva 例項
- (2)、裝載外掛
- (3)、註冊 Model
- (4)、配置路由
- (5)、啟動應用
- 2、router.js
- 使用
- 解釋一下
- 3、components 包
- 4、routes 包
- 5、services 包
- 6、utils 包
- 6、models 包
簡介
本次教程共分為兩個文件，這是第一部分(一、二、三)。
先給小夥伴們看一下本文的目錄架構：
- 一、介紹
- 二、環境搭建和使用
- 三、全域性架構
- 四、Model 包下檔案架構
- 五、connect 連線 Model 和 Route 頁面下的資料
- 六、初始化資料 和 Model 資料比對
- 七、資料顯示和操作的流程
- 八、稍複雜概念
一、介紹
1、什麼是 dva
React 應用級框架，將 React-Router + Redux + Redux-saga 三個 React 工具庫包裝在一起，簡化了 API，讓開發 React 應用更加方便和快捷
簡單理解：dva = React-Router + Redux + Redux-saga
2、dva 的作用是什麼
二、環境搭建和使用
1、環境搭建
$ npm install dva-cli -g
$ dva -v //檢視下是否安裝成功，顯示 dva 的版本號
dva-cli version 0.9.1
2、建立專案
$ dva new dva-1 //dva-1 為你建立專案的名稱
安裝成功後，cd進入dva-1目錄下，通過npm start和yarn start啟動專案
如果啟動報錯的話，可以先執行npm i或者yarn
3、使用 antd
在進入到專案目錄下後，輸入如下命令：
$ npm install antd babel-plugin-import --save
通過npm
antd和babel-plugin-import。babel-plugin-import是用來按需載入antd的指令碼和樣式的。
注意!!!
請在全域性目錄下找到.webpackrc檔案，輸入以下程式碼，使babel-plugin-import外掛生效。
{
+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ]
}
再次強調：注意上面的外掛生效的程式碼，不輸入以上程式碼，按需載入 antd 外掛不生效
三、全域性架構
.
├── mock // mock資料資料夾
├── node_modules // 第三方的依賴
├── public // 存放公共public檔案的資料夾
├── src // 最重要的資料夾，編寫程式碼都在這個資料夾下
│ ├── assets // 可以放圖片等公共資源
│ ├── components // 就是react中的木偶元件
│ ├── models // dva最重要的資料夾，所有的資料互動及邏輯都寫在這裡
│ ├── routes // 就是react中的智慧元件，不要被資料夾名字誤導。
│ ├── services // 放請求借口方法的資料夾
│ ├── utils // 自己的工具方法可以放在這邊
│ ├── index.css // 入口檔案樣式
│ ├── index.ejs // ejs模板引擎
│ ├── index.js // 入口檔案
│ └── router.js // 專案的路由檔案
├── .eslintrc // bower安裝目錄的配置
├── .editorconfig // 保證程式碼在不同編輯器視覺化的工具
├── .gitignore // git上傳時忽略的檔案
├── .roadhogrc.js // 專案的配置檔案，配置介面轉發，css_module等都在這邊。
├── .roadhogrc.mock.js // 專案的配置檔案
└── package.json // 當前整一個專案的依賴
1、index.js(重點)
import dva from 'dva';
// 1、建立 dva 例項
const app = dva();
// 2、裝載外掛 (可選)
app.use(require('dva-loading')());
// 3、註冊 Model
app.model(require('./models/example'));
// 4、配置路由
app.router(require('./router'));
// 5、啟動應用
app.start('#root');
通過上面的程式碼塊，應該就可以很清楚了了解到 Dva 的5個 API
如果還不清楚，沒關係，下面我一一講解：
(1)、建立 dva 例項
用於建立應用，返回 dva 例項，dva 支援多例項，如：
const app = dva({
history,
initialState,
onError,
onAction,
onStateChange,
onReducer,
onEffect,
onHmr,
extraReducers,
extraEnhancers,
});
但是鑑於我只用過initialState,就拿initialState來說。
initialState為初始化資料，後面會講解它和model中state的區別。大家可以在留心觀看哈。
每個頁面初始化的資料都將放在這裡。並且initialState物件下的命名方式為：每個model的namespce
如果命名不規範，資料是初始化不到頁面上的。
(2)、裝載外掛
需要任何樣式的外掛以上面的形式編寫程式碼即可。
如果不需要任何外掛，這段程式碼都可以直接省略。
上面引用的外掛是：頁面還未載入完畢時顯示的loading圖示，加上了上面那行外掛程式碼，你就不要每個頁面都寫showloading和hideloading了。
(3)、註冊 Model
你每創建出來的一個model都需要來全域性index.js來註冊一下，這樣model層才能用。
Model 層的程式碼是重點，會放到下面的第四大點重點講解。這裡只是告訴大家要註冊一下。
(4)、配置路由
細心的小夥伴會發現在index.js同級目錄下有一個router.js,這裡的配置路由就是配置這個頁面的東西。下面第2小點馬上就講解，這裡只是告訴大家，如何引用配置好的路由。
(5)、啟動應用
啟動應用不解釋。
2、router.js
開啟router.js你就看到如下的程式碼：
import IndexPage from './routes/IndexPage';
import HomePage from './routes/HomePage';
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
.
.
.
<Route path="/home" exact component={HomePage} />
</Switch>
</Router>
使用
我們每創建出來的一個頁面，都需要在這裡配置路由。
path:為頁面的路徑名稱,注意：要加上字首斜槓。命名可以隨意，不過一般以建立頁面的名字命名，這樣比較清楚。
component:為程式碼最上方匯入的頁面。
上面我寫了一個home頁面的例子，供大家參考。
解釋一下
每個路由器都會建立一個history物件，並用其保持追蹤當前location並在有變化的時候進行重新渲染。
location:是一個含有描述 URL 不同部分屬性的物件。
來看一下 Dva官網的解釋：這裡的路由通常指的是前端路由，由於我們的應用現在通常是單頁應用，所以我們需要前端程式碼來控制路由邏輯，同茶館瀏覽器提供的History API可以監聽瀏覽器url的變化，從而控制路由相關操作。
dva 使用的是react-router來控制路由。
小夥伴們如果想深入學習路由這塊的內容可以找度娘搜尋：react router學習哈。
3、components 包
一般為我們創建出來的公共元件。
4、routes 包
這裡我們可以理解為pages。你所要顯示出來的頁面都寫在這個下面。
5、services 包
為後臺呼叫服務端介面的包，不做解釋。
6、utils 包
這個包可以用來存放一些公共方法。需要使用時，匯入js,直接使用方法即可。
6、models 包
models包用來存放 所有的model檔案。
一個完整的model檔案的架構：
export defalut {
namespace:'',
state:{},
reducers:{},
effects:{},
subscriptions:{},
}