반응 dva 란 무엇입니까?

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가 도입되었습니다

소개

• 프로젝트 상황: nw.js + React + redux + antd(클라이언트 애플리케이션 )
• 대상: redux -> 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’);

3. 然后在同级目录下添加路由文件 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

• 를 참고하세요. 공식 문서 및 프로젝트 변환 dva 모드의 경우 src 아래 항목 파일 index.js
  🎜rrreee
  🎜를 추가하거나 수정한 다음 라우팅 파일 를 추가합니다. js🎜
  rrreee🎜 설명: App 구성 요소는 메뉴, 머리글, 바닥글 및 일부 공통 부분을 포함하는 전체 페이지의 컨테이너 구성 요소입니다. 해당 경로에 대해 각 하위 구성 요소 페이지로 이동할 수 있으므로 라우팅 구성은 중첩된 형식으로 작성해야 합니다. 🎜자세한 라우팅 구성은 React-Router 공식 문서를 참조하세요. 가장 간단한 dva 모드가 구성되었습니다. 해당 구성 요소에 모델과 감속기를 설정하면 dva를 사용하여 상태를 관리할 수 있습니다. 🎜🎜🎜문제 해결됨🎜🎜🎜구성이 완료되면 프로젝트를 다시 시작하세요. 다음과 같이 페이지 효과를 확인하세요: 🎜🎜🎜컨테이너가 부분적으로 렌더링되었으나 하위 경로(기본적으로 계정)에 해당하는 페이지가 렌더링되지 않은 것으로 확인되었습니다. 그런 다음 콘솔을 살펴보고 오류를 찾습니다. 🎜🎜1. 이 경고 메시지는 다음과 같습니다. 🎜rrreee🎜 dva 문제에서 동일한 문제를 발견하면 프롬프트에 따라 다음 형식으로 변경하세요. 🎜rrreee🎜2 그런 다음 라우팅 문제에 대한 경고가 표시됩니다. 🎜🎜rrreee🎜React-router 4.0 이상에서는 아래와 같이 중첩 라우팅을 사용하는 것이 더 이상 권장되지 않습니다🎜rrreee🎜따라서 직접 컴포넌트 중첩 형태로 변경합니다(하위 라우터의 경로는 반드시 /를 추가해야 합니다). 🎜rrreee🎜변경하고 다시 시도하면 이 두 가지 경고가 사라집니다. 라우팅 및 렌더링 문제를 계속 살펴보세요. 🎜🎜3 논리적으로 말하면 애플리케이션에 들어가면 기본적으로 Account 구성 요소가 표시되며(IndexRoute가 구성되어 있기 때문에) 파일이 수정되고 페이지가 새로 고쳐지면 페이지에서 다음과 같이 오류를 직접 보고합니다. 🎜🎜🎜뭔가 문제가 있는 것 같아요 페이지 라우팅 구성으로 관련 정보(React 채우기 함정, 새로 고침 후 반응 라우터 오류 보고)를 검색한 결과 dva에서 BrowserHistory를 사용하는 데 문제가 있는 것으로 나타났습니다. 그러니 BrowserHistory를 HashHistory🎜로 변경하세요. 🎜rrreee🎜프로젝트를 다시 시작하고 경로 전환을 시도한 결과 모든 것이 정상임을 확인했습니다. 🎜🎜🎜팔로우하시면 됩니다 나중에 dva가 페이지에서 수정되었습니다. dva의 모델 및 감속기 사용법은 문서에 따라 시도해 보세요. 여기서는 하나씩 설명하지 않겠습니다. 🎜

  요약

  🎜 프로젝트에 dva를 도입할 때 직면한 몇 가지 문제를 요약합니다. 🎜🎜🎜🎜import createHistory from 'history/createHashHistory'; 쓰기 방법에서 경고가 발생합니다. 🎜🎜🎜🎜createHashHistory를 사용하면 페이지 새로 고침 실패 문제가 발생합니다. 🎜🎜🎜🎜중첩 라우팅 구성에 문제가 있습니다. 🎜

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 반응 dva 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!