React에서 dva는 redux 및 redux-saga를 기반으로 하는 데이터 흐름 솔루션으로, 개발 경험을 단순화하기 위해 React-Router 및 Fetch도 내장되어 있으므로 경량 애플리케이션 프레임워크로도 이해할 수 있습니다. .
이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
dva 소개
dva 공식 웹사이트 주소: https://dvajs.com/
dva는 Ant Financial에서 출시한 단일 페이지 애플리케이션 프레임워크로 redux, React-router, redux를 구현합니다. -saga 상위 패키지. redux-saga는 redux 애플리케이션의 비동기 작업을 관리하기 위한 미들웨어입니다. redux-saga는 sagas를 생성하여 모든 비동기 작업 로직을 한곳에 수집하고 redux-thunk 미들웨어를 대체하는 데 사용할 수 있습니다
이는 애플리케이션의 로직이 두 곳에 존재합니다
(1) 리듀서는 액션의 단계 업데이트를 처리합니다
(2) 사가는 복잡하거나 비동기적인 작업을 조정하는 역할을 담당합니다
사가는 생성기 기능을 통해 생성됩니다
Sagas는 백그라운드에서 실행되는 프로세스로 생각할 수 있습니다. sagas는 시작된 작업을 모니터링한 다음 이 작업을 기반으로 무엇을 할지 결정합니다(예: 비동기 요청을 시작할지, 저장소에 대한 다른 작업을 시작할지, 다른 sagas를 호출할지 등).
생성기 함수는 다음과 같습니다. Used, redux-saga 동기 방식으로 비동기 코드를 작성할 수 있습니다
React 프로젝트에 Dva가 도입되었습니다
소개
Preparation
먼저 dva 설치(현재 버전 2.4.1)npm install dva —savenpm 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
index.js🎜rrreee를 추가합니다. js🎜
🎜🎜컨테이너가 부분적으로 렌더링되었으나 하위 경로(기본적으로 계정)에 해당하는 페이지가 렌더링되지 않은 것으로 확인되었습니다. 그런 다음 콘솔을 살펴보고 오류를 찾습니다. 🎜🎜1. 이 경고 메시지는 다음과 같습니다. 🎜rrreee🎜 dva 문제에서 동일한 문제를 발견하면 프롬프트에 따라 다음 형식으로 변경하세요. 🎜rrreee🎜2 그런 다음 라우팅 문제에 대한 경고가 표시됩니다. 🎜🎜rrreee🎜React-router 4.0 이상에서는 아래와 같이 중첩 라우팅을 사용하는 것이 더 이상 권장되지 않습니다🎜rrreee🎜따라서 직접 컴포넌트 중첩 형태로 변경합니다(하위 라우터의 경로는 반드시 /를 추가해야 합니다). 🎜rrreee🎜변경하고 다시 시도하면 이 두 가지 경고가 사라집니다. 라우팅 및 렌더링 문제를 계속 살펴보세요. 🎜🎜3 논리적으로 말하면 애플리케이션에 들어가면 기본적으로 Account 구성 요소가 표시되며(IndexRoute가 구성되어 있기 때문에) 파일이 수정되고 페이지가 새로 고쳐지면 페이지에서 다음과 같이 오류를 직접 보고합니다. 🎜🎜🎜뭔가 문제가 있는 것 같아요 페이지 라우팅 구성으로 관련 정보(React 채우기 함정, 새로 고침 후 반응 라우터 오류 보고)를 검색한 결과 dva에서 BrowserHistory를 사용하는 데 문제가 있는 것으로 나타났습니다. 그러니 BrowserHistory를 HashHistory🎜로 변경하세요. 🎜rrreee🎜프로젝트를 다시 시작하고 경로 전환을 시도한 결과 모든 것이 정상임을 확인했습니다. 🎜import createHistory from 'history/createHashHistory'; 쓰기 방법에서 경고가 발생합니다. 🎜🎜🎜🎜createHashHistory를 사용하면 페이지 새로 고침 실패 문제가 발생합니다. 🎜🎜🎜🎜중첩 라우팅 구성에 문제가 있습니다. 🎜더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 반응 dva 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
