在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
#介紹
專案情況：nw.js react redux antd (客戶端應用)目標： redux -> dva
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.jsimport 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>更多路由配置，參考react-router 官方文件。
#問題解決
配置完成後重新啟動專案，查看頁面效果如下：
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;
Warning: You should not use <route> and <route> in the same route; <route> will be ignored</route></route></route>
<route> <route></route> </route>
<app> <route></route> </app>
BrowserHistory 的問題，所以直接把BrowserHistory 改成HashHistory
//const createHistory = require(‘history’).createBrowserHistory; const createHistory = require(‘history’).createHashHistory;
重新啟動項目，嘗試切換路由，發現一切正常了。
總結
###總結一下專案在引入 dva 遇到的幾個問題。 ###############import createHistory from 'history/createHashHistory';### 寫法帶來的警告#############使用###createHashHistory# ## 導致的頁面刷新失敗的問題。 ############嵌套路由配置的問題。 ###更多程式相關知識，請造訪：程式設計入門！ ！
以上是什麼是react dva？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
