Maison interface Web js tutoriel Zustand : gestion d'état simple, rapide et évolutive pour React

Zustand : gestion d'état simple, rapide et évolutive pour React

Dec 19, 2024 am 08:38 AM

Zustand: Simple, Fast, and Scalable State Management for React

Zusstand : une solution de gestion d'état petite, rapide et évolutive pour React

Zustand est une bibliothèque de gestion d'état minimaliste, rapide et évolutive pour React. Il vise à offrir une solution simple et sans passe-partout pour la gestion de l'état, en mettant l'accent sur les performances et l'évolutivité. Zustand fonctionne en créant des magasins qui gèrent l'état et fournissent des crochets simples pour accéder et mettre à jour l'état.

Le nom de la bibliothèque, Zustand, vient du mot allemand signifiant « état », et il est conçu pour rendre l'utilisation de l'état dans React à la fois intuitive et puissante. Zustand se distingue par sa simplicité et sa flexibilité, ce qui en fait un excellent choix pour gérer l'état local et global dans les applications React.


1. Qu’est-ce que Zustand ?

Zustand est une petite bibliothèque de gestion d'état réactive et sans opinion pour les applications React. Il fournit un magasin flexible avec des crochets qui vous permettent d'accéder et de muter facilement l'état. Zustand n'est lié à aucune architecture particulière, ce qui signifie que vous pouvez l'utiliser pour gérer l'état globalement ou localement sans introduire de complexité inutile.

Principales fonctionnalités de Zustand :

  • API minimaliste : Zustand possède une API simple avec très peu de lignes de code.
  • Pas de passe-partout : contrairement à Redux, Zustand ne nécessite pas d'actions ou de réducteurs pour fonctionner, et il n'a pas besoin de configuration supplémentaire.
  • Basé sur un magasin : Zustand utilise des magasins pour gérer l'état de l'application, ce qui facilite son organisation et sa mise à l'échelle.
  • Adapté à React : Zustand s'intègre facilement à React, en tirant parti des hooks et de l'API contextuelle.

2. Concepts de base de Zustand

1. Magasin

Un store dans Zustand est simplement un objet qui contient l'état de l'application. Il peut être défini à l'aide de la fonction create fournie par Zustand, et vous pouvez inclure des méthodes pour manipuler l'état.

Exemple :

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));
Copier après la connexion
Copier après la connexion
Copier après la connexion
  • Le hook useStore est le magasin créé à l'aide de la fonction de création de Zustand. L'état est stocké sous forme de nombre et des actions telles que l'incrémentation et la décrémentation modifient l'état.

2. Accès à l'État

Une fois que vous avez créé un magasin, vous pouvez utiliser le hook useStore dans vos composants React pour lire et modifier l'état.

Exemple :

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));
Copier après la connexion
Copier après la connexion
Copier après la connexion
  • Le hook useStore vous donne accès à l'état et aux actions définies dans votre boutique. Vous pouvez déstructurer l'état et les actions dont vous avez besoin et les utiliser directement dans votre composant.

3. État de mise à jour

Pour mettre à jour l'état, vous utilisez la méthode set fournie dans le magasin. La méthode set prend une fonction qui obtient l'état actuel et renvoie un nouvel état. Zustand déclenche automatiquement de nouveaux rendus pour les composants qui utilisent l'état qui a changé.

Exemple :

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;
Copier après la connexion
Copier après la connexion
  • La méthode d'incrémentation utilise la fonction set pour mettre à jour l'état du décompte en incrémentant sa valeur actuelle.

3. Avantages de Zustand

1. Simple et minimaliste

Zustand est léger et possède une API très simple, ce qui rend incroyablement facile à utiliser dans n'importe quelle application React. L'absence de code passe-partout, de réducteurs ou de types d'action en fait une excellente alternative pour gérer l'état dans React sans la complexité trouvée dans d'autres bibliothèques comme Redux.

2. Évolutif

Zustand peut facilement s'adapter à des applications complexes. Il prend en charge à la fois la gestion de l'état local (pour les composants individuels) et la gestion de l'état global dans l'ensemble de votre application. Zustand est conçu pour gérer des applications volumineuses et évolutives avec un minimum de frais généraux.

3. Performances optimisées

Zustand utilise les hooks et le contexte intégrés de React pour s'abonner efficacement aux changements d'état et mettre à jour uniquement les composants qui doivent être restitués. Cela garantit d'excellentes performances même dans les applications plus volumineuses.

4. Prise en charge de TypeScript

Zustand dispose d'un excellent support TypeScript, fournissant des magasins et des hooks sécurisés prêts à l'emploi.

5. Aucun fournisseur nécessaire

Contrairement à certaines bibliothèques de gestion d'état, Zustand ne nécessite pas qu'un fournisseur soit intégré à votre application. L'état est accessible directement via des hooks, ce qui le rend facile à utiliser sans configuration supplémentaire.

6. Flexible et sans opinion

Zusstand n'applique aucun modèle ni aucune restriction. Vous pouvez structurer votre état comme bon vous semble et utiliser Zustand comme magasin local ou gestionnaire d'état mondial. Il vous offre une flexibilité totale pour organiser l’état de votre application de la manière qui vous convient le mieux.


4. Intégrer Zustand avec React

Intégrer Zustand dans une application React est incroyablement simple. Voici un guide étape par étape pour configurer Zustand dans une application React :

Étape 1 : Installer Zustand

Pour installer Zustand, exécutez la commande suivante :

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));
Copier après la connexion
Copier après la connexion
Copier après la connexion

Étape 2 : Créer une boutique

Créez un magasin qui contient l'état et les actions de votre application. Voici un exemple de magasin au comptoir simple :

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;
Copier après la connexion
Copier après la connexion

Étape 3 : Utiliser le magasin dans les composants

Maintenant que vous avez créé le magasin, vous pouvez accéder à l'état et aux actions de vos composants React à l'aide du hook useStore.

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
Copier après la connexion
  • Dans cet exemple, useStore est utilisé pour accéder au décompte actuel et aux méthodes pour modifier le décompte (incrémenter et décrémenter).

Étape 4 : utilisez le composant dans votre application

Enfin, vous pouvez restituer le composant Counter dans votre application.

npm install zustand
Copier après la connexion

5. Fonctionnalités avancées de Zustand

1. État persistant

Zustand fournit un middleware pour conserver l'état sur localStorage, sessionStorage ou d'autres mécanismes de stockage.

Exemple :

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;
Copier après la connexion
  • Ce middleware conservera l'état du décompte dans localStorage afin que l'état soit maintenu même après le rechargement d'une page.

2. Combiner plusieurs magasins

Zustand vous permet de regrouper plusieurs magasins si vous souhaitez séparer les préoccupations ou gérer différentes tranches d'État.

Exemple :

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;
Copier après la connexion
  • Ici, nous avons deux magasins indépendants pour les données utilisateur et produit. Vous pouvez les importer et les utiliser indépendamment dans vos composants.

6. Conclusion

Zustand propose une solution minimaliste, flexible et performante pour gérer l'état dans les applications React. Sa simplicité et son évolutivité en font un excellent choix pour les petites et grandes applications React. En utilisant des hooks et des modèles réactifs, Zustand permet aux développeurs de se concentrer sur la création de leurs applications sans avoir à gérer le passe-partout d'autres bibliothèques de gestion d'état.

Que vous créiez une petite application ou une application à grande échelle, Zustand fournit un moyen léger, efficace et évolutif de gérer l'état dans 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel Java
1653
14
Tutoriel PHP
1251
29
Tutoriel C#
1224
24
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Démystifier javascript: ce qu'il fait et pourquoi c'est important Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

JavaScript est-il difficile à apprendre? JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

L'évolution de JavaScript: tendances actuelles et perspectives d'avenir L'évolution de JavaScript: tendances actuelles et perspectives d'avenir Apr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal? Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal? Apr 04, 2025 pm 02:06 PM

Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...

See all articles