Ajouter de l'interactivité

Certains éléments à l'écran se mettent à jour en réponse aux actions de l'utilisateur. Par exemple, cliquer sur une galerie d'images change l'image active. Dans React, les données qui changent au fil du temps sont appeléesétat.Vous pouvez ajouter un état à n'importe quel composant et le mettre à jour selon les besoins. Dans ce chapitre, vous apprendrez à écrire des composants qui gèrent les interactions, mettent à jour leur état et affichent des résultats différents au fil du temps.

Répondre aux événements

React vous permet d'ajouter desgestionnaires d'événementsà votre JSX. Les gestionnaires d'événements sont vos propres fonctions qui seront déclenchées en réponse aux interactions de l'utilisateur, comme un clic, un survol, la focalisation sur des champs de formulaire, etc.

Les composants intégrés comme<button>ne prennent en charge que les événements natifs du navigateur, commeonClick. Cependant, vous pouvez également créer vos propres composants et donner à leurs props de gestionnaires d'événements n'importe quel nom spécifique à votre application.

État : la mémoire d'un composant

Les composants ont souvent besoin de modifier ce qui est affiché à l'écran suite à une interaction. Saisir du texte dans un formulaire doit mettre à jour le champ de saisie, cliquer sur « suivant » dans un carrousel d'images doit changer l'image affichée, cliquer sur « acheter » ajoute un produit au panier. Les composants doivent « mémoriser » des choses : la valeur actuelle de la saisie, l'image actuelle, le contenu du panier. Dans React, ce type de mémoire spécifique à un composant est appeléétat.

Vous pouvez ajouter un état à un composant avec un HookuseState. LesHookssont des fonctions spéciales qui permettent à vos composants d'utiliser les fonctionnalités de React (l'état est l'une de ces fonctionnalités). Le HookuseStatevous permet de déclarer une variable d'état. Il prend l'état initial en argument et renvoie une paire de valeurs : l'état actuel et une fonction de mise à jour de l'état qui vous permet de le modifier.

Voici comment une galerie d'images utilise et met à jour l'état lors d'un clic :

Rendu et validation

Avant que vos composants ne soient affichés à l'écran, ils doivent être rendus par React. Comprendre les étapes de ce processus vous aidera à réfléchir à la façon dont votre code s'exécute et à expliquer son comportement.

Imaginez que vos composants sont des cuisiniers dans une cuisine, assemblant de délicieux plats à partir d'ingrédients. Dans ce scénario, React est le serveur qui prend les commandes des clients et leur apporte leurs plats. Ce processus de demande et de service de l'interface utilisateur comporte trois étapes :

1. Déclenchementd'un rendu (transmission de la commande du client à la cuisine)
2. Rendudu composant (préparation de la commande en cuisine)
3. Validationdans le DOM (dépose de la commande sur la table)

1. Déclenchement
2. Rendu
3. Validation

Illustrations parRachel Lee Nabors

L'état comme un instantané

Contrairement aux variables JavaScript classiques, l'état de React se comporte davantage comme un instantané. Le modifier ne change pas la variable d'état que vous avez déjà, mais déclenche plutôt un nouveau rendu. Cela peut être surprenant au début !

Ce comportement vous aide à éviter des bugs subtils. Voici une petite application de chat. Essayez de deviner ce qui se passe si vous appuyez d'abord sur « Envoyer » etensuitechangez le destinataire en Bob. Quel nom apparaîtra dans l'alertcinq secondes plus tard ?

Mettre en file d'attente une série de mises à jour d'état

Ce composant est bogué : cliquer sur « +3 » n'incrémente le score qu'une seule fois.

L'état comme un instantanéexplique pourquoi cela se produit. Modifier l'état demande un nouveau rendu, mais ne le change pas dans le code déjà en cours d'exécution. Doncscorecontinue d'être0juste après avoir appelésetScore(score + 1).

Vous pouvez résoudre ce problème en passant unefonction de mise à jourlors de la définition de l'état. Remarquez comment remplacersetScore(score + 1)parsetScore(s => s + 1)corrige le bouton « +3 ». Cela vous permet de mettre en file d'attente plusieurs mises à jour d'état.

Mettre à jour des objets dans l'état

L'état peut contenir n'importe quel type de valeur JavaScript, y compris des objets. Mais vous ne devez pas modifier directement les objets et tableaux que vous conservez dans l'état React. Au lieu de cela, lorsque vous souhaitez mettre à jour un objet ou un tableau, vous devez en créer un nouveau (ou faire une copie d'un existant), puis mettre à jour l'état pour utiliser cette copie.

Généralement, vous utiliserez la syntaxe de décomposition...pour copier les objets et tableaux que vous souhaitez modifier. Par exemple, la mise à jour d'un objet imbriqué pourrait ressembler à ceci :

Si la copie d'objets dans le code devient fastidieuse, vous pouvez utiliser une bibliothèque commeImmerpour réduire le code répétitif :

Mettre à jour des tableaux dans l'état

Les tableaux sont un autre type d'objet JavaScript mutable que vous pouvez stocker dans l'état et que vous devez traiter comme en lecture seule. Tout comme pour les objets, lorsque vous souhaitez mettre à jour un tableau stocké dans l'état, vous devez en créer un nouveau (ou faire une copie d'un existant), puis définir l'état pour utiliser le nouveau tableau :

Si copier des tableaux dans le code devient fastidieux, vous pouvez utiliser une bibliothèque commeImmerpour réduire le code répétitif :

Et ensuite ?

Rendez-vous surRépondre aux événementspour commencer à lire ce chapitre page par page !

Ou, si vous êtes déjà familier avec ces sujets, pourquoi ne pas lire à propos deGérer l'état?