Hook useMergeState de React

Introduction

Dans ce laboratoire, nous allons explorer le hook useMergeState dans React. Ce hook nous permet de créer une valeur avec état et une fonction pour la mettre à jour en fusionnant le nouvel état fourni. Nous allons apprendre à utiliser ce hook pour simplifier la gestion de l'état et rendre notre code plus efficace.

Skills Graph

React useMergeState Hook

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Pour créer une valeur avec état et une fonction pour la mettre à jour en fusionnant le nouvel état fourni, utilisez le hook useState() pour créer une variable d'état et l'initialiser avec initialState. Créez une fonction qui mettra à jour la variable d'état en fusionnant le nouvel état fourni avec l'état existant. Si le nouvel état est une fonction, appelez-la avec l'état précédent comme argument et utilisez le résultat. Si aucun argument n'est fourni, la variable d'état sera initialisée avec un objet vide ({}). Le code suivant montre comment implémenter cela en utilisant le hook personnalisé useMergeState :

const useMergeState = (initialState = {}) => {
  const [value, setValue] = React.useState(initialState);

  const mergeState = (newState) => {
    if (typeof newState === "function") {
      newState = newState(value);
    }
    setValue({ ...value, ...newState });
  };

  return [value, mergeState];
};

Voici un exemple d'utilisation du hook useMergeState dans un composant nommé MyApp :

const MyApp = () => {
  const [data, setData] = useMergeState({ name: "John", age: 20 });

  return (
    <>
      <input
        value={data.name}
        onChange={(e) => setData({ name: e.target.value })}
      />
      <button onClick={() => setData(({ age }) => ({ age: age - 1 }))}>
        -
      </button>
      {data.age}
      <button onClick={() => setData(({ age }) => ({ age: age + 1 }))}>
        +
      </button>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations! Vous avez terminé le laboratoire sur le hook React useMergeState. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.