在react中，dva是一個基於redux和redux-saga的資料流方案，然後為了簡化開發體驗，dva還額外內建了react-router和fetch，所以也可以理解為一個輕量級的應用框架。
dva介紹
#dva官網網址：https://dvajs.com/
dva是螞蟻金服推出的一個單頁應用框架，對redux，react-router，redux-saga進行了上層封裝。 redux-saga是一個用於管理redux應用非同步操作的中間件，redux-saga透過建立sagas將所有非同步操作邏輯收集在一個地方集中處理，可以用來取代redux-thunk中間件
-
#這表示應用的邏輯會存在兩個地方
(1) reducer負責處理action的stage更新
(2) sagas負責協調那些複雜或非同步的操作
sagas是透過generator函數來建立的
#sagas可以被看作是在背景執行的程序。 sagas監聽發起的action，然後決定基於這個action來做什麼(例如：是發起一個非同步請求，還是發起其他的action到store，還是呼叫其他的sagas 等
因為使用了generator函數，redux-saga讓你可以用同步的方式來寫非同步程式碼
React 專案引入Dva
準備
先安裝dva（目前版本2.4.1）
npm install dva —save
#參考官方文檔，改造專案為dva 模式，在src 下新增或修改入口文件index.js
import dva from ‘dva’;
import createHistory from ‘history/createHashHistory’;
//1.Initialize
const app = dva({
history: createHistory(),
});
//2.Plugins
//app.use({});
//3.Model
//app.model(require(‘./models/app’).default);
//4.Router
app.router(require(‘./router’).default);
//5.Start
app.start(‘#root’);登入後複製
然後在同級目錄下加入路由檔案
router.js
import React from ‘react’;
import { Router, Route, Switch } from ‘dva/router’;
import App from ‘./containers/App’;
import{ Account, Articles, Channels, Editor } from ‘./containers’;
const { ArticleList } = Articles;
const RouterConfig = (({ history }) => (
<routerhistory>
<switch>
<route>
<indexroute></indexroute>
<route></route>
<route></route>
<route></route>
<route></route>
</route>
</switch>
));
export default RouterConfig;</routerhistory>登入後複製
說明：App 元件是整個頁面的容器元件，包含了menu、header、footer和一些公用部分，透過切換選單來匹配對應路由，從而跳到各個子元件頁面，所以路由配置需要寫成嵌套形式。
更多路由配置，參考react-router 官方文件。
到這裡，一個最簡單的dva 模式已經配置好了，只要在對應元件裡面設定model、reducer 並在頁面中connect ，就可以使用dva 來管理狀態了。
#問題解決
配置完成後重新啟動專案，查看頁面效果如下：
#發現容器部分渲染成功，但是子路由對應的頁面（預設是Account ）並沒有渲染，再看控制台發現報錯了。
1、首先是這樣一個警告訊息：
Warning: Please use `require(“history”).createHashHistory` instead of `require(“history/createHashHistory”)`. Support for the latter will be removed in the next major release.
登入後複製
const createHistory = require(‘history’).createBrowserHistory;
登入後複製
2、然後是一個路由問題的警告：
Warning: You should not use <route> and <route> in the same route; <route> will be ignored</route></route></route>
登入後複製
React-router 4.0 以上版本已經不建議像下面這樣使用嵌套路由了
<route>
<route></route>
</route>
登入後複製
對應的，直接改成元件嵌套的形式（注意子路由的path 要加上/）就可以了。
<app>
<route></route>
</app>
登入後複製
改完之後再重新，這兩個警告就沒有了。繼續看路由和渲染的問題。
3、按理來說，進入應用程式預設會顯示Account 元件（因為配置了IndexRoute），而且當修改檔案刷新頁面時候，頁面直接報錯了，如下：
更多程式相關知識，請造訪：程式設計入門！ ！
以上是什麼是react dva？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
