반응에서 antd와 dva는 무엇을 의미합니까?

React에서 antd는 주로 기업 수준의 중간 및 백엔드 제품을 개발하는 데 사용되는 Ant Design 기반의 React UI 구성 요소 라이브러리입니다. dva는 redux 및 "redux-saga" 기반의 데이터 흐름 솔루션입니다. 애플리케이션 프레임워크로 이해될 수 있는 "react-router" 및 fetch에 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React에서 antd와 dva의 의미

antd

antd는 Ant Design 디자인 시스템을 기반으로 하는 React UI 컴포넌트 라이브러리로 주로 기업 수준의 중간 및 백엔드 제품을 개발하는 데 사용됩니다.

Features

• 는 기업 수준의 중간 및 백엔드 제품의 대화형 언어와 시각적 스타일에서 추출됩니다.

• 즉시 사용 가능한 고품질 React 구성요소.

• TypeScript를 사용하여 구축되어 완전한 유형 정의 파일을 제공합니다.

• 전체 링크 개발 및 디자인 도구 시스템

적용 방법

1. 설치: (명령줄에 다음 명령 입력)

   npm install antd --save

2. 글로벌에서 플러그인 참조 예:

import 'antd/dist/antd.css';

3. 필요에 따라 로드(필요한 플러그인을 직접 로드)

 import Button from 'antd/lib/button';
        import 'antd/lib/button/style';

dva

dva는 redux 및 redux-saga를 기반으로 하는 데이터 흐름 솔루션입니다. 개발 경험이 풍부하기 때문에 dva에는 React-Router 및 Fetch도 내장되어 있으므로 경량 애플리케이션 프레임워크로도 이해할 수 있습니다.

dva는 Ant Financial에서 출시한 단일 페이지 애플리케이션 프레임워크로, redux, React-router 및 redux-saga의 상위 계층 캡슐화를 제공합니다. redux-saga는 redux 애플리케이션의 비동기 작업을 관리하는 데 사용되는 미들웨어입니다. redux-saga는 sagas를 생성하여 중앙 집중식 처리를 위해 모든 비동기 작업 로직을 한 곳에 수집합니다. 이는 redux-thunk 미들웨어를 대체하는 데 사용할 수 있습니다. 로직은 두 곳에 존재합니다

(1) 리듀서는 액션의 단계 업데이트를 처리합니다

(2) 사가는 복잡하거나 비동기적인 작업을 조정하는 역할을 담당합니다

사가는 생성기 기능을 통해 생성됩니다

saga는 백그라운드에서 실행되는 프로세스로 간주될 수 있습니다. Sagas는 시작된 작업을 모니터링한 다음 이 작업을 기반으로 무엇을 할지 결정합니다(예: 비동기 요청을 시작할지, 저장소에 대한 다른 작업을 시작할지, 다른 sagas를 호출할지 등).

생성기를 사용하기 때문에 redux-saga를 사용하면 비동기식 코드를 동기식으로 작성할 수 있습니다

React 프로젝트에 Dva가 도입되었습니다

첫 번째 설치 dva(현재 버전 2.4.1)

npm install dva —save

공식 문서를 참조하여 프로젝트를 다음으로 변환하세요. dva 모드, src File 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’);

아래 항목을 추가하거나 수정하세요. 권장 학습: "

react video tutorial

"

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