首頁  >  文章  >  web前端  >  什麼是react dva?

什麼是react dva?

青灯夜游
青灯夜游原創
2020-11-24 15:32:017853瀏覽

在react中,dva是一個基於redux和redux-saga的資料流方案,然後為了簡化開發體驗,dva還額外內建了react-router和fetch,所以也可以理解為一個輕量級的應用框架。

什麼是react dva?

  • 該方法適用於所有品牌的電腦。

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


什麼是react dva?

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 來管理狀態了。

#問題解決

配置完成後重新啟動專案,查看頁面效果如下:


什麼是react 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 以上版本已經不建議像下面這樣使用嵌套路由了什麼是react dva?
<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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn