首頁 > web前端 > 前端問答 > react中antd和dva是什麼意思

react中antd和dva是什麼意思

WBOY
發布: 2022-04-21 15:25:07
原創
2964 人瀏覽過

在react中,antd是基於Ant Design的React UI元件庫,主要用於研發企業級中後台產品;dva是一個基於redux和「redux-saga」的資料流方案,內建了「 react-router」和fetch,可理解為應用框架。

react中antd和dva是什麼意思

本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react中antd和dva是什麼意思

antd

antd是基於Ant Design 設計體系的React UI 元件庫,主要用於研發企業級中後台產品。

特性

  • 提煉自企業級中後台產品的互動語言和視覺風格。

  • 開箱即用的高品質 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是螞蟻金服推出的一個單頁應用框架,對redux,react-router,redux-saga進行了上層封裝。 redux-saga是一個用於管理redux應用非同步操作的中間件,redux-saga透過創建sagas將所有非同步操作邏輯收集在一個地方集中處理,可以用來代替redux-thunk中間件

這意味著應用程式的邏輯會存在兩個地方

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

(2) sagas負責協調那些複雜或非同步的運算

sagas是透過generator函數來建立的

sagas可以被看作是在後台運行的程序。 sagas監聽發起的action,然後決定基於這個action來做什麼(例如:是發起一個非同步請求,還是發起其他的action到store,還是呼叫其他的sagas 等

因為使用了generator函數,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影片教學

以上是react中antd和dva是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板