在react中，antd是基于Ant Design的React UI組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品；dva是一個(gè)基于redux和“redux-saga”的數(shù)據(jù)流方案，內(nèi)置了“react-router”和fetch，可理解為應(yīng)用框架。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中antd和dva是什么意思

antd

antd是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。

特性

• 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。

• 開(kāi)箱即用的高質(zhì)量 React 組件。

• 使用 TypeScript 構(gòu)建，提供完整的類(lèi)型定義文件。

• 全鏈路開(kāi)發(fā)和設(shè)計(jì)工具體系

應(yīng)用方法

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是一個(gè)基于redux和redux-saga的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)，dva還額外內(nèi)置了react-router和fetch，所以也可以理解為一個(gè)輕量級(jí)的應(yīng)用框架。

dva是螞蟻金服推出的一個(gè)單頁(yè)應(yīng)用框架，對(duì)redux，react-router，redux-saga進(jìn)行了上層封裝。redux-saga是一個(gè)用于管理redux應(yīng)用異步操作的中間件，redux-saga通過(guò)創(chuàng)建sagas將所有異步操作邏輯收集在一個(gè)地方集中處理，可以用來(lái)代替redux-thunk中間件

這意味著應(yīng)用的邏輯會(huì)存在兩個(gè)地方

(1) reducer負(fù)責(zé)處理action的stage更新

(2) sagas負(fù)責(zé)協(xié)調(diào)那些復(fù)雜或者異步的操作

sagas是通過(guò)generator函數(shù)來(lái)創(chuàng)建的

sagas可以被看作是在后臺(tái)運(yùn)行的進(jìn)程。sagas監(jiān)聽(tīng)發(fā)起的action，然后決定基于這個(gè)action來(lái)做什么 (比如：是發(fā)起一個(gè)異步請(qǐng)求，還是發(fā)起其他的action到store，還是調(diào)用其他的sagas 等

因?yàn)槭褂昧薵enerator函數(shù)，redux-saga讓你可以用 同步的方式來(lái)寫(xiě)異步代碼

React 項(xiàng)目引入 Dva

首先安裝 dva （目前版本 2.4.1）

npm install dva —save

參考官方文檔，改造項(xiàng)目為 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’);

推薦學(xué)習(xí)：《react視頻教程》