Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what the concept of antd and dva is in react. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

In react, antd is a React UI component library based on Ant Design, which is mainly used to develop enterprise-level middle and background products; dva is a data flow scheme based on redux and "redux-saga", with built-in "react-router" and fetch, which can be understood as an application framework.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What do antd and dva mean in react

Antd

Antd is a React UI component library based on Ant Design design system, which is mainly used for the research and development of enterprise-level middle and background products.

Characteristics

Extracted from the interactive language and visual style of enterprise-level middle and back-end products.

Out-of-the-box high-quality React components.

Build using TypeScript to provide a complete type definition file.

Full-link development and design tool architecture

Application method

1. Install: (type the following command on the command line)

Npm install antd-save

two。 Quote

Reference the plug-in in the global file for example:

Import 'antd/dist/antd.css'

3. Load on demand (whatever plug-ins are needed to load directly)

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

Dva

Dva is a data flow scheme based on redux and redux-saga, and then in order to simplify the development experience, dva also has additional built-in react-router and fetch, so it can also be understood as a lightweight application framework.

Dva is a single-page application framework launched by Ant Financial Services Group, which encapsulates redux,react-router,redux-saga in the upper layer. Redux-saga is a middleware for managing asynchronous operations of redux applications. Redux-saga collects all asynchronous operation logic in one place by creating sagas, which can be used to replace redux-thunk middleware.

This means that the logic of the application will exist in two places.

(1) reducer is responsible for handling stage updates of action

(2) sagas is responsible for coordinating complex or asynchronous operations.

Sagas is created through the generator function

Sagas can be thought of as a process running in the background. Sagas listens to the initiated action and then decides what to do based on the action (for example, whether to initiate an asynchronous request, initiate another action to store, or call another sagas, etc.)

Because of the generator function, redux-saga allows you to write asynchronous code synchronously

Introduction of Dva into React Project

Install dva first (current version 2.4.1)

Npm install dva-save

Refer to the official documents, transform the project to dva mode, add or modify the entry file index.js under src

Import dva from 'dva';import createHistory from' history/createHashHistory'; / / 1.Initializeconst app = dva ({history: createHistory (),}); / / 2.Plugins//app.use ({}); / / 3.Model//app.model (require ('. / models/app') .default); / / 4.Routerapp.router (require ('. / router') .default); / / 5.Startapp.start ('# root') These are all the contents of the article "what are the concepts of antd and dva in react?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.