什麼是react dva？

在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

準備

先安裝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.

在dva 的issure 裡面查找到相同的問題，按照提示改成下面的格式就可以了。

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填坑之react-router刷新後報錯解決方法），發現原來是dva 中使用

  BrowserHistory 的問題，所以直接把BrowserHistory 改成HashHistory

就可以了。

• //const createHistory = require(‘history’).createBrowserHistory;
  const createHistory = require(‘history’).createHashHistory;

  重新啟動項目，嘗試切換路由，發現一切正常了。

後面就可以在頁面中進行dva 的改造了，dva 中model 、reducer 的用法都比較簡單，根據文檔進行嘗試就可以了，這裡便不一一敘述了。

• 總結

  ###總結一下專案在引入 dva 遇到的幾個問題。 ###############import createHistory from 'history/createHashHistory';### 寫法帶來的警告#############使用###createHashHistory# ## 導致的頁面刷新失敗的問題。 ############嵌套路由配置的問題。 ###

更多程式相關知識，請造訪：程式設計入門！ ！

以上是什麼是react dva？的詳細內容。更多資訊請關注PHP中文網其他相關文章！