Que signifient antd et dva en réaction ?

Dans React, antd est une bibliothèque de composants React UI basée sur Ant Design, principalement utilisée pour développer des produits middle et back-end au niveau de l'entreprise ; dva est une solution de flux de données basée sur redux et "redux-saga", avec des fonctionnalités intégrées ; dans "react-router" et fetch, qui peuvent être compris comme des frameworks d'application.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Que signifient antd et dva dans React

antd

antd est une bibliothèque de composants d'interface utilisateur React basée sur le système de conception Ant Design. Elle est principalement utilisée pour développer des produits intermédiaires et back-end au niveau de l'entreprise.

Les fonctionnalités

• sont extraites du langage interactif et du style visuel des produits intermédiaires et back-end au niveau de l'entreprise.

• Composants React de haute qualité prêts à l'emploi.

• Construit en utilisant TypeScript, fournissant des fichiers de définition de type complets.

• Système d'outils de développement et de conception à lien complet

Méthode d'application

1. Installation : (Tapez la commande suivante dans la ligne de commande)

   npm install antd --save

2. Référence

Référencez le plug-in dans le fichier global. fichier, par exemple :

import 'antd/dist/antd.css';

3. Charger à la demande (charger directement les plug-ins nécessaires)

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

dva

dva est une solution de flux de données basée sur redux et redux-saga, et afin de simplifier En termes d'expérience de développement, dva intègre également React-Router et Fetch, il peut donc également être compris comme un cadre d'application léger.

dva est un framework d'application d'une seule page lancé par Ant Financial, qui fournit une encapsulation de couche supérieure de Redux, React-Router et Redux-Saga. redux-saga est un middleware utilisé pour gérer les opérations asynchrones des applications redux. redux-saga rassemble toute la logique des opérations asynchrones en un seul endroit pour un traitement centralisé en créant des sagas. Il peut être utilisé pour remplacer le middleware redux-thunk

Cela signifie que l'application. La logique existera à deux endroits

(1) Le réducteur est responsable du traitement de la mise à jour de l'étape de l'action

(2) Les sagas sont responsables de la coordination de ces opérations complexes ou asynchrones

les sagas sont créées via la fonction générateur

Les

sagas peuvent être considérées comme un processus exécuté en arrière-plan. Sagas surveille l'action initiée, puis décide quoi faire en fonction de cette action (par exemple : s'il faut lancer une requête asynchrone, lancer d'autres actions vers le magasin, ou appeler d'autres sagas, etc.

En raison de l'utilisation du générateur fonction, redux-saga vous permet de Vous pouvez écrire du code asynchrone de manière synchrone

Le projet React introduit Dva

Première installation de dva (version actuelle 2.4.1)

npm install dva —save

Référez-vous à la documentation officielle, transformez le projet en mode dva, ajoutez ou modifiez l'entrée sous src Fichier 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’);

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!