React Hook sous-estimé - useSyncExternalStore

Aperçu

Découvrez une puissance cachée dans l'écosystème React : le hook « useSyncExternalStore ». Cet article explore son potentiel de transformation, remettant en question les paradigmes traditionnels de gestion étatique. En intégrant de manière transparente des sources de données externes et en améliorant la communication entre les composants, ce crochet offre une approche non conventionnelle mais puissante.

Voyagez avec nous pendant que nous démystifions useSyncExternalStore. Nous décortiquerons ses mécanismes, dévoilerons ses avantages et présenterons des applications pratiques à travers des exemples concrets. À la fin, vous comprendrez comment utiliser ce crochet pour rationaliser la complexité, améliorer les performances et apporter un nouveau niveau d'organisation à votre base de code.

Usage

Selon React, useSyncExternalStore est un React Hook qui vous permet de vous abonner à une boutique externe. Mais qu’est-ce qu’un « magasin externe » exactement ? Cela prend littéralement 2 fonctions :

• La fonction d'abonnement doit s'abonner au magasin et renvoyer une fonction de désabonnement.
• La fonction getSnapshot doit lire un instantané des données du magasin. D'accord, ça pourrait être difficile à obtenir au début. On peut aller dans l'exemple.

La démo

Pour notre démo d'aujourd'hui, je vais me lancer dans une application classique : La « Todo List ».

Le magasin

Tout d'abord, nous devons définir l'état initial :

export type Task = {
  id: string;
  content: string;
  isDone: boolean;
};

export type InitialState = {
  todos: Task[];
};

export const initialState: InitialState = { todos: [] };

Vous pouvez voir que j'ai défini les types puis créé l'état qui a todos sous forme de tableau vide

C'est maintenant le réducteur :

export function reducer(state: InitialState, action: any) {
  switch (action.type) {
    case "ADD_TASK":
      const task = {
        content: action.payload,
        id: uid(),
        isDone: false,
      };
      return {
        ...state,
        todos: [...state.todos, task],
      };

    case "REMOVE_TASK":
      return {
        ...state,
        todos: state.todos.filter((task) => task.id !== action.payload),
      };

    case "COMPLETE_TASK":
      const tasks = state.todos.map((task) => {
        if (task.id === action.payload) {
          task.isDone = !task.isDone;
        }
        return task;
      });
      return {
        ...state,
        todos: tasks,
      };

    default:
      return state;
  }
}

Notre réducteur n'a que 3 actions : ADD_TASK, REMOVE_TASK et COMPLETE_TASK. C'est l'exemple classique d'une logique de liste de tâches.

Enfin, ce qu'on attend, le magasin :

let listeners: any[] = [];

function createStore(reducer: any, initialState: InitialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function dispatch(action: any) {
    state = reducer(state, action);

    emitChange();
  }

  function subscribe(listener: any) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  const store = {
    dispatch,
    getState,
    subscribe,
  };

  return store;
}

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

export const store = createStore(reducer, initialState);

Cet extrait de code illustre la création d'un simple système de gestion d'état de type Redux dans TypeScript. Voici un aperçu de son fonctionnement :

1. listeners Array : ce tableau contient une liste de fonctions d'écoute qui seront notifiées chaque fois que l'état change.

2. Fonction createStore : Cette fonction est responsable de la création d'une boutique de style Redux. Il faut deux paramètres :

• réducteur : une fonction de réduction chargée de calculer l'état suivant en fonction de l'état actuel et de l'action envoyée.
• initialState : l'état initial de l'application.

1. state : Cette variable contient l'état actuel de l'application.

2. Fonction getState : renvoie l'état actuel.

3. Fonction de répartition : accepte un objet d'action, le transmet au réducteur avec l'état actuel, met à jour l'état avec le résultat, puis appelle la fonction émetChange pour informer les auditeurs du changement d'état.

4. Fonction d'abonnement : accepte une fonction d'écoute, l'ajoute au tableau des écouteurs et renvoie une fonction de nettoyage qui peut être appelée pour supprimer l'écouteur.

5. Objet store : l'objet store créé contient des références aux fonctions dispatch, getState et Subscribe.

6. Fonction EmitChange : parcourt le tableau des écouteurs et appelle chaque fonction d'écoute, les informant d'un changement d'état.

A la fin du code, un store est créé grâce à la fonction createStore, avec un réducteur et un état initial donnés. Cette boutique peut désormais être importée et utilisée dans d'autres parties de l'application pour gérer et contrôler l'état.

Il est important de noter que ce code fournit une implémentation simplifiée d'un système de gestion d'état et manque de certaines fonctionnalités avancées et optimisations trouvées dans des bibliothèques comme Redux. Cependant, il constitue un excellent point de départ pour comprendre les concepts de base de la gestion d'état à l'aide d'écouteurs et d'une fonction de réduction.

Pour utiliser le hook useSyncExternalStore. On peut obtenir l'état comme ceci :

const { todos } = useSyncExternalStore(store.subscribe, store.getState);

Avec cet appel hook, nous pouvons accéder au magasin de manière globale et dynamique, tout en conservant la lisibilité et la maintenabilité

Avantages et inconvénients

Le hook « useSyncExternalStore » présente à la fois des avantages et des inconvénients potentiels dans le cadre de la gestion des états au sein d'une application React :

Avantages :

1. Intégration transparente avec des sources externes : le hook permet une intégration sans effort avec des sources de données externes, favorisant une approche unifiée de la gestion de l'état. Cette intégration peut simplifier la gestion des données d’origines diverses, améliorant ainsi la cohésion de l’application.

2. Communication entre composants : « useSyncExternalStore » facilite une communication efficace entre les composants, rationalisant le partage de données et réduisant le besoin de forage complexe d'accessoires ou de gestion du contexte.

3. Améliorations des performances : en centralisant la gestion de l'état et en minimisant la propagation des mises à jour d'état, ce hook a le potentiel d'optimiser les performances de rendu, ce qui se traduit par une application plus réactive et efficace.

4. Simplicité et code propre : l'API abstraite du hook peut conduire à un code plus propre et plus organisé, le rendant plus facile à comprendre et à maintenir, en particulier dans les applications à grande échelle.

5. Boilerplate réduit : « useSyncExternalStore » peut réduire le besoin d'écrire du code redondant pour la gestion de l'état, offrant ainsi un moyen concis et cohérent de gérer l'état à l'échelle de l'application.

Inconvénients :

1. Courbe d'apprentissage : les développeurs qui ne sont pas familiers avec ce hook peuvent rencontrer une courbe d'apprentissage lors de la transition à partir de solutions de gestion d'état plus établies. S'adapter à une nouvelle approche pourrait dans un premier temps ralentir le développement.

2. Limites de personnalisation : les fonctionnalités prédéfinies du hook peuvent ne pas s'aligner parfaitement sur les exigences uniques de chaque application. La personnalisation du comportement au-delà des capacités du hook peut nécessiter des solutions de contournement supplémentaires.

3. Surcharge d'abstraction potentielle : en fonction de sa mécanique interne, le hook peut introduire une légère surcharge en termes de performances ou d'utilisation de la mémoire par rapport à des solutions plus optimisées adaptées spécifiquement aux besoins de l'application.

4. Communauté et écosystème : en tant que hook sous-estimé ou moins connu, « useSyncExternalStore » peut manquer d'une communauté bien établie et d'un écosystème complet, ce qui pourrait entraîner moins de ressources disponibles ou de bibliothèques tierces. .

5. Compatibilité et futures mises à jour : La compatibilité avec les futures versions de React et les mises à jour potentielles du hook lui-même pourraient être des sujets de préoccupation. Garantir une assistance à long terme et des mises à niveau transparentes peut nécessiter une diligence supplémentaire.

Conclusion

En résumé, useSyncExternalStore offre une approche unique de la gestion de l'état, mettant l'accent sur une intégration transparente et une communication entre composants. Bien qu'il offre plusieurs avantages, tels que des performances améliorées et un code simplifié, les développeurs doivent évaluer soigneusement sa compatibilité avec les exigences de leur projet et prendre en compte la courbe d'apprentissage potentielle et les limites.

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!