在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>說明:App 元件是整個頁面的容器元件,包含了menu、header、footer和一些公用部分,透過切換選單來匹配對應路由,從而跳到各個子元件頁面,所以路由配置需要寫成嵌套形式。
更多路由配置,參考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.在dva 的issure 裡面查找到相同的問題,按照提示改成下面的格式就可以了。
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>對應的,直接改成元件嵌套的形式(注意子路由的path 要加上/)就可以了。
<app> <route></route> </app>改完之後再重新,這兩個警告就沒有了。繼續看路由和渲染的問題。 3、按理來說,進入應用程式預設會顯示Account 元件(因為配置了IndexRoute),而且當修改檔案刷新頁面時候,頁面直接報錯了,如下:
BrowserHistory 的問題,所以直接把BrowserHistory 改成
HashHistory
//const createHistory = require(‘history’).createBrowserHistory; const createHistory = require(‘history’).createHashHistory;
重新啟動項目,嘗試切換路由,發現一切正常了。
總結
###總結一下專案在引入 dva 遇到的幾個問題。 ###############import createHistory from 'history/createHashHistory';### 寫法帶來的警告#############使用###createHashHistory# ## 導致的頁面刷新失敗的問題。 ############嵌套路由配置的問題。 ###更多程式相關知識,請造訪:程式設計入門! !
以上是什麼是react dva?的詳細內容。更多資訊請關注PHP中文網其他相關文章!