Jotai : une bibliothèque de gestion d'état simple et puissante pour React

Jotai : une bibliothèque de gestion d'état primitive et flexible pour React

Jotai est une bibliothèque de gestion d'état minimaliste pour les applications React. Il offre une approche simple et atomique de la gestion de l'état, vous permettant de gérer et de mettre à jour l'état directement dans vos composants tout en gardant une architecture simple et facile à comprendre. Jotai est conçu pour être hautement performant et flexible, ce qui en fait un excellent choix pour les applications React de toute taille, des petits projets aux applications à grande échelle.

Avec son API simple et sa petite taille de bundle, Jotai est particulièrement adapté aux développeurs qui préfèrent la gestion d'état atomique sans le passe-partout souvent associé aux bibliothèques de gestion d'état plus complexes comme Redux.

---

1. Concepts de base de Jotai

Jotai présente une API simple avec quelques concepts clés qui facilitent la gestion de l'état dans React :

1. Atomes

Les atomes de Jotai représentent les plus petites unités d'état, similaires aux atomes de Recoil. Un atome contient un seul élément d’état et les composants peuvent lire et écrire la valeur d’un atome. Les atomes sont accessibles dans le monde entier et constituent le fondement de la gestion de l'État de Jotai.

Exemple :

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• atome est utilisé pour définir une unité d'état. La valeur de cet atome peut être lue ou écrite dans les composants React.

2. utiliserAtom

Le hook useAtom est le principal moyen d'interagir avec les atomes dans Jotai. Il permet aux composants de lire la valeur d'un atome et de la mettre à jour. Ceci est similaire à l'utilisation de useState, mais avec la possibilité de partager l'état entre les composants.

Exemple :

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

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

• useAtom est utilisé pour obtenir et définir l'état d'un atome. La première valeur (compteur) est l'état actuel et la seconde (setCounter) est une fonction utilisée pour mettre à jour l'état.

3. Atomes dérivés

Jotai vous permet de créer des atomes dérivés qui dépendent d'autres atomes ou de données dérivées. Ceux-ci sont similaires aux sélecteurs de Recoil et vous permettent de calculer de nouvelles valeurs basées sur d'autres atomes.

Exemple :

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

• Les atomes dérivés sont créés à l'aide d'une fonction qui lit d'autres atomes et renvoie une nouvelle valeur basée sur ces atomes.

4. Effets atomiques

Jotai prend également en charge les effets atomiques, qui peuvent exécuter du code en réponse aux changements dans les valeurs des atomes. Cela vous permet d'effectuer des effets secondaires comme la récupération de données ou l'exécution de rappels lorsque l'état change.

Exemple :

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• Ce modèle permet d'exécuter des effets secondaires, comme des appels d'API ou la journalisation, chaque fois que l'état d'un atome change.

---

2. Avantages de l'utilisation de Jotai

1. Simple et léger

Jotai est conçu pour être minimaliste et léger, avec une très petite surface API. Il ne nécessite pas de code passe-partout comme les créateurs ou les réducteurs d'actions, ce qui rend le démarrage plus rapide.

2. Performances

Jotai utilise un modèle réactif, dans lequel seuls les composants qui utilisent un atome particulier seront restitués lorsque cet atome change. Cela se traduit par des mises à jour efficaces, notamment pour les grandes applications comportant de nombreux composants.

3. Contrôle à grain fin

Jotai vous donne un contrôle précis sur l'état de votre application. Les atomes sont indépendants et peuvent être gérés directement sans avoir besoin de structures complexes telles que des réducteurs ou des fournisseurs de contexte.

4. Re-rendus minimaux

Jotai optimise les rendus en mettant à jour uniquement les composants qui s'abonnent à l'atome spécifique qui a changé, plutôt que de restituer l'intégralité de l'arborescence des composants.

5. Évolutif et flexible

La conception atomique de Jotai facilite son évolution à mesure que votre application se développe. Vous pouvez avoir plusieurs atomes indépendants qui représentent différentes parties de l’état de votre application, ce qui rend l’architecture propre et flexible.

---

3. Exemple d'application Jotai complète

Voici un exemple de petite application de compteur utilisant Jotai :

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

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

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

import { atom } from 'jotai';

export const counterAtom = atom(
  0, // Initial value
  (get, set, update) => {
    // Atom effect: run a side effect when the counter is updated
    console.log('Counter updated:', update);
    set(counterAtom, update); // Update the state of counterAtom
  }
);

Comment cela fonctionne :

• Les atomes détiennent l'état du compteur (counterAtom).
• useAtom est utilisé dans le composant Counter pour lire et mettre à jour la valeur de l'atome.
• setCounter met à jour l'état de l'atome lorsque vous cliquez sur les boutons.

---

4. Quand utiliser Jotai

Jotai est un excellent choix lorsque :

• Vous avez besoin d'une solution de gestion d'état minimaliste et efficace.
• Vous souhaitez gérer l'état au niveau atomique.
• Vous préférez une API déclarative et flexible sans avoir besoin de passe-partout supplémentaire.
• Vous travaillez sur un projet qui nécessite des hautes performances et un contrôle précis des nouveaux rendus.

Si votre projet est petit ou si vous souhaitez éviter les complexités des solutions de gestion d'état plus importantes comme Redux, Jotai propose une alternative simple et puissante.

---

5. Conclusion

Jotai est une bibliothèque de gestion d'état puissante mais légère qui se concentre sur l'état atomique et le minimalisme. Avec son API simple, ses optimisations de performances et son contrôle précis, Jotai est un excellent choix pour les développeurs React à la recherche d'une solution de gestion d'état flexible et efficace.

---

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!