N'utilisez pas React.Context, créez des hooks.

Dans cet article, nous verrons comment se débarrasser de React.Context dans vos applications et trouverons une motivation pour le faire.

Vous connaissez probablement React et avez peut-être déjà eu une expérience avec React.Context si vous êtes tombé sur cet article, mais sinon, n'hésitez pas à le lire quand même et à le partager avec les personnes qui pourraient être intéressées.

---

1. Pourquoi éviter React.Context ?

Le contexte dégrade la lisibilité, enchevêtre et restreint l'application.

Jetez simplement un œil à cet exemple de base :

98a86725d72d98f2b9cabc482365e7f8
  4b90a298546767af0dfbf93180d488e9
    9ccdbad4d7cf2a5ab2f30697c3e282f0
      805c6193b8bd78f920c172a82a0e8e47
        5b13746435d164e45e11fb6d2c565337
      98e42f95a9cd80104723307a01d2a42d
    37fe62713bcc433be054e66f06fcb3ad
  30fcab49531d609f912afed89b90ce7e
f27e91231f5585982d1354585706ae4a

Ça n’a pas l’air trop compréhensible et fiable, n’est-ce pas ?

Voici quelques problèmes potentiels lors de l'utilisation de contextes :

1. Plus vous utilisez de contextes, moins votre application devient lisible et contrôlable ;
2. Parfois, les contextes imbriqués nécessitent un ordre correct pour fonctionner, ce qui rend votre application difficile à maintenir ;
3. Certains contextes doivent être réutilisés lors de la configuration d'un environnement de test pour continuer à fonctionner correctement ;
4. Vous devez vous assurer que le composant est un enfant dans l'arborescence d'un fournisseur de contexte nécessaire.

Fait amusant : la fameuse "promesse-enfer" se ressemble ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

---

2. Comment remplacer React.Context ?

Créez plutôt des crochets.

Remplacons ThemeContext de l'exemple ci-dessus par un hook useTheme personnalisé :

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

Nous avons utilisé un package npm appelé use-app-events pour permettre à toutes les instances du hook useTheme de communiquer afin de synchroniser l'état de leur thème. Cela garantit que la valeur du thème sera la même lorsque useTheme est appelé plusieurs fois dans l'application.

De plus, grâce au package use-app-events, le thème sera synchronisé même entre les onglets du navigateur.

À ce stade, ThemeContext n'est plus nécessaire car le hook useTheme peut être utilisé n'importe où dans l'application pour obtenir le thème actuel et le mettre à jour :

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: light16b28748ea4df4d9c2150843fecfba68
  return dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: {theme}16b28748ea4df4d9c2150843fecfba68;
}

Quels sont les avantages de l'approche :

1. Pas besoin d'installer un crochet quelque part dans l'arbre avant que les enfants puissent l'utiliser (y compris les environnements de test) ;
2. La structure de rendu est plus propre, ce qui signifie qu'il n'y a plus de structure en forme de flèche déroutante construite à partir de vos contextes ;
3. L'état est synchronisé entre les onglets.

---

Conclusion

React.Context était certainement un outil puissant il y a quelque temps, mais les hooks offrent un moyen plus contrôlé et plus fiable de gérer l'état global de votre application s'ils sont correctement implémentés en conjonction avec le package use-app-events.

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!