Quelle est la différence entre redux et réagir

Les différences entre redux et React sont : 1. Redux est un conteneur d'état JavaScript, tandis que React est une bibliothèque JavaScript lancée par Facebook pour créer des interfaces utilisateur. 2. Redux fournit principalement la gestion de l'état, tandis que React utilise principalement For ; créer une interface utilisateur, etc.

L'environnement d'exploitation de ce tutoriel : système windows7, version React17, ordinateur DELL G3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel de base Javascript"

Différence

redux

redux est un conteneur d'état JavaScript qui assure principalement la gestion des états. Peut fonctionner sur des applications serveur, client et natives. En plus de prendre en charge React, il prend également en charge d'autres frameworks d'interface utilisateur et est de petite taille, seulement 2 Ko. Lorsque vous l'utilisez avec React, vous pouvez utiliser le plug-in React-Redux pour améliorer encore notre expérience de développement.

Vous pouvez modifier les données de ce conteneur en appelant l'API correspondante ou en utilisant le mécanisme correspondant. D'autres composants peuvent effectuer un nouveau rendu en ré-obtenant activement de nouvelles données à partir du conteneur.

De plus, ce conteneur doit également prendre en charge le mécanisme de publication et d'abonnement, c'est-à-dire que lorsque certaines données changent, les composants concernés par les données seront immédiatement informés.

react

react est une bibliothèque JavaScript lancée par Facebook pour créer des interfaces utilisateur. React est principalement utilisé pour créer une interface utilisateur. Beaucoup de gens considèrent React comme le V (vue) dans MVC. React a des performances élevées et une logique de code très simple. De plus en plus de gens ont commencé à y prêter attention et à l'utiliser.

React est une bibliothèque JavaScript open source qui fournit des vues HTML pour les données. Les vues React sont généralement rendues à l'aide de composants contenant d'autres composants spécifiés dans des balises HTML personnalisées. React fournit aux programmeurs un modèle dans lequel les composants enfants ne peuvent pas affecter directement les composants externes, des mises à jour efficaces des documents HTML lorsque les données changent et une séparation nette entre les composants dans les applications modernes d'une seule page.

Apprenez à utiliser vos propres pensées pour comprendre React et Redux ; vous ne pouvez pas simplement écouter les autres décrire les noms, car il est très difficile de les comprendre.

Partez des besoins et voyez ce qui est nécessaire pour utiliser React :

1 React a des accessoires et un état : les accessoires signifient les propriétés distribuées par le parent et l'état signifie. L'état interne du composant peut être géré par lui-même, et React dans son ensemble n'a pas la capacité de retracer les données vers le haut, ce qui signifie que les données ne peuvent être distribuées que vers le bas dans une seule direction, ou digérées en interne par elles-mêmes.

Comprendre cela est la condition préalable pour comprendre React et Redux.

2. Un composant React généralement construit peut contenir une application complète, qui fonctionne bien seule, et vous pouvez la contrôler via des propriétés en tant qu'API. Mais le plus souvent, on constate que React ne peut pas permettre à deux composants de communiquer entre eux et d'utiliser les données de chacun.

La seule solution à l'heure actuelle sans communiquer via DOM (c'est-à-dire au sein du système React) est d'améliorer l'état, de placer l'état dans un composant parent partagé pour la gestion, puis de le redistribuer à l'enfant. composant comme accessoires.

3. La seule façon pour un composant enfant de changer l'état du composant parent est de déclencher le rappel déclaré par le composant parent via onClick, c'est-à-dire que le composant parent déclare à l'avance une fonction ou une méthode comme un contrat pour décrire comment son état va changer, puis transmettez-le également au composant enfant en tant qu'attribut.

Un modèle émerge : les données sont toujours distribuées dans un sens, de haut en bas, mais seuls les rappels de sous-composants peuvent conceptuellement revenir à l'état supérieur pour affecter les données. De cette manière, l’État réagit dans une certaine mesure.

4. Afin de faire face à tous les problèmes d'expansion possibles, la façon la plus simple de penser est de placer tous les états au niveau supérieur de tous les composants, puis de les distribuer à tous les composants.

5. Afin d'avoir une meilleure gestion de l'état, une bibliothèque est nécessaire pour la distribuer à toutes les applications React en tant qu'état de niveau supérieur plus professionnel. Revenons et regardons les exigences pour reproduire la structure ci-dessus :

a besoin d'un rappel pour notifier l'état (équivalent au paramètre de rappel) -> l'action

doit être traitée selon le callback (équivalent à la méthode parent) -> réducteur

nécessite un état (égal à l'état total) -> store

n'a que ces trois éléments pour Redux :

l'action est purement déclarative. La structure de données fournit uniquement tous les éléments de l'événement et ne fournit pas de logique.

Le réducteur est une fonction de correspondance, et l'envoi de l'action est global : tous les réducteurs peuvent capturer et faire correspondre si cela est pertinent pour lui-même ou non. S'il est pertinent, les éléments de l'action seront supprimés pour. traitement logique, et les éléments du magasin seront modifiés. Si l'état n'est pas pertinent, l'état ne sera pas traité et renvoyé tel quel.

Store est responsable du stockage de l'état et peut être rappelé par l'API de réaction et les actions de publication.

Bien sûr, les deux bibliothèques ne sont généralement pas utilisées directement. Il existe également une liaison appelée réagir-. redux, qui fournit un fournisseur et se connecte. Beaucoup de gens comprennent que Redux est bloqué ici.

Le fournisseur est un composant commun qui peut être utilisé comme point de distribution de l'application de niveau supérieur. Il nécessite uniquement l'attribut store. Il distribuera l'état à tous les composants connectés, peu importe où ils se trouvent ou combien de niveaux ils sont imbriqués.

connect est le vrai point. C'est une fonction curry, ce qui signifie qu'elle accepte d'abord deux paramètres (liaison de données mapStateToProps et liaison d'événement mapDispatchToProps), puis accepte un paramètre (le composant à lier lui-même) :

mapStateToProps : lorsque vous construisez le système Redux, il sera automatiquement initialisé, mais votre composant React ne connaît pas son existence, vous devez donc trier l'état Redux dont vous avez besoin, vous devez donc lier une fonction, son paramètre C'est un état qui renvoie simplement quelques valeurs qui vous intéressent.

mapDispatchToProps : L'action déclarée peut également être injectée dans le composant en tant que rappel, via cette fonction, son paramètre est dispatch, et via la méthode auxiliaire redux bindActionCreator, toutes les actions et paramètres dispatch sont liés. simplement utilisé comme attribut dans un composant en tant que fonction, sans envoi manuel. Ce mapDispatchToProps est facultatif. Si vous ne transmettez pas ce paramètre, redux injectera simplement dispatch en tant qu'attribut dans le composant, qui peut être utilisé manuellement comme store.dispatch.

C'est aussi la raison pour laquelle il faut le guérir.

Après avoir terminé le processus ci-dessus, Redux et React seront prêts à fonctionner.

Pour faire simple :

1. État de distribution de niveau supérieur, permettant aux composants React de s'afficher passivement.

2. Écoutez les événements, et les événements ont le droit de revenir au plus haut niveau de tous les États pour affecter l'État.

Résumé :

React a besoin d'un gestionnaire pour gérer l'état. Redux joue le rôle de distribuer l'état de niveau supérieur et de modifier le rendu des composants de réaction.

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!