今天小編給大家分享一下react中antd和dva的概念是什么的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比霞山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式霞山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋霞山地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

在react中，antd是基于Ant Design的React UI組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品；dva是一個基于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è)計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品。

特性

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

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

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

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

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

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

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

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

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

sagas是通過generator函數(shù)來創(chuàng)建的

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

因為使用了generator函數(shù)，redux-saga讓你可以用 同步的方式來寫異步代碼

React 項目引入 Dva

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

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’);

以上就是“react中antd和dva的概念是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。