React useDefault Hook

Introduction

Dans ce laboratoire, nous allons explorer comment créer un hook personnalisé appelé useDefault en React. Le but de ce hook est de créer une valeur avec état avec une valeur de repli par défaut si elle est null ou undefined, et une fonction pour la mettre à jour. À la fin du laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser les hooks personnalisés pour simplifier votre code React et le rendre plus efficace.

Skills Graph

React useDefault 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.

Voici le code :

const useDefault = (defaultState, initialState) => {
  const [value, setValue] = React.useState(initialState);
  const isEmpty = value === undefined || value === null;
  return [isEmpty ? defaultState : value, setValue];
};

const UserCard = () => {
  const [user, setUser] = useDefault({ name: "Adam" }, { name: "John" });

  return (
    <>
      <div>User: {user.name}</div>
      <input onChange={(e) => setUser({ name: e.target.value })} />
      <button onClick={() => setUser(null)}>Clear</button>
    </>
  );
};

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

Pour créer une valeur avec état avec une valeur de repli par défaut, utilisez le hook useState() en React. Vérifiez si la valeur initiale est soit null soit undefined. Si c'est le cas, renvoyez le defaultState à la place, sinon renvoyez l'état value réel et la fonction setValue. Le code ci-dessus montre comment implémenter cette fonctionnalité dans un hook personnalisé appelé useDefault.

Dans l'exemple fourni, useDefault est utilisé pour créer un état user avec une valeur par défaut de { name: 'Adam' }. L'état initial est défini sur { name: 'John' }. Dans le composant UserCard, user est affiché avec un champ de saisie pour mettre à jour son nom. Un bouton de nettoyage est également fourni pour réinitialiser l'état à null. Enfin, le composant est rendu à l'aide de ReactDOM.createRoot().

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 React useDefault Hook. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.