In react, antd is a React UI component library based on Ant Design, which is mainly used to develop enterprise-level middle and back-end products; dva is a data flow solution based on redux and "redux-saga", with built-in " "react-router" and fetch can be understood as application frameworks.
The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.
antd
antd is a React UI component library based on the Ant Design design system, mainly used for research and development Enterprise-level mid- and back-end products.
Features
Extracted from the interactive language and visual style of enterprise-level mid- and back-end products.
High quality React components out of the box.
Built using TypeScript, providing complete type definition files.
Full-link development and design tool system
Application method
1. Installation: (Type in the command line The following command)
npm install antd --save
2. Reference
Reference the plug-in in the global file. For example:
import 'antd/dist/antd.css';
3. Load on demand (load whatever plug-in is needed directly)
import Button from 'antd/lib/button'; import 'antd/lib/button/style';
dva
dva is a data flow solution based on redux and redux-saga. In order to simplify the development experience, dva also has built-in react-router and fetch, so it is also It can be understood as a lightweight application framework.
dva is a single-page application framework launched by Ant Financial, which provides upper-layer encapsulation of redux, react-router, and redux-saga. redux-saga is a middleware used to manage asynchronous operations of redux applications. redux-saga collects all asynchronous operation logic in one place for centralized processing by creating sagas. It can be used to replace redux-thunk middleware
This It means that the application logic will exist in two places
(1) The reducer is responsible for processing the stage update of the action
(2) The sagas is responsible for coordinating those complex or asynchronous operations
Sagas are created through the generator function
Sagas can be regarded as processes running in the background. sagas listens to the initiated action, and then decides what to do based on this action (for example: whether to initiate an asynchronous request, initiate other actions to the store, or call other sagas, etc.
Because the generator function is used, redux -saga allows you to write asynchronous code in a synchronous way
React project introduces Dva
First install dva (current version 2.4.1)
npm install dva —save
Refer to the official documentation, transform the project into dva mode, add or modify the entry file index.js under src
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’);
Recommended learning: "react video tutorial"
The above is the detailed content of What do antd and dva mean in react?. For more information, please follow other related articles on the PHP Chinese website!