Pourquoi les hooks React affichent-ils un comportement d'état incohérent avec les écouteurs d'événements ?

Comportement incorrect de React Hooks avec Event Listener

Présentation

Cet article se penche sur un problème rencontré lors de l'utilisation de React Hooks, concernant spécifiquement le comportement incohérent de journalisation de la console d'état lorsqu'elle est déclenchée par des écouteurs d'événements dans des composants personnalisés.

Énoncé du problème

Considérez le CodeSandbox donné : https://codesandbox.io/s/lrxw1wr97m. En suivant ces étapes :

1. Cliquez deux fois sur le bouton "Ajouter une carte" pour créer deux cartes.
2. Dans la première carte, cliquez sur "Bouton1" pour afficher le nombre correct de cartes (2 ) dans la console.
3. Dans la première carte, cliquez sur "Bouton2" (qui est géré par un écouteur d'événement) pour observer un affichage incorrect d'une seule carte dans la console.

Le problème survient lors de la tentative d'affichage de l'état mis à jour à partir de l'écouteur d'événement attaché à "Button2".

Cause première

L'écart dans l'affichage de l'état provient des différentes manières dont les gestionnaires d'événements sont implémentés. dans les composants CardsProvider et Card.

• CardsProvider : Les gestionnaires d'événements sont définis dans la portée du composant fonctionnel, créant de nouvelles fonctions avec des références à l'état actuel au moment de la définition.
• Carte : Les gestionnaires d'événements sont reçus comme accessoires et enregistrés une fois sur le support de composant. Cependant, ces gestionnaires font référence à un état obsolète qui peut ne pas représenter l'état actuel.

Solutions

Plusieurs approches peuvent résoudre ce problème :

État mutable :

Des valeurs d'état mutables telles que celles fournies par useRef peuvent être utilisées pour conserver les derniers changements d'état. Cependant, cette méthode n'est pas recommandée car useState est destinée à gérer l'état immuable.

Fonction de mise à jour d'état :

L'utilisation des fonctions de mise à jour d'état permet de transmettre le dernier état au rappel, garantissant que l'état affiché est toujours actuel.

Réenregistrement manuel des auditeurs d'événements :

Alternativement, les auditeurs d'événements peuvent être réenregistrés à chaque mise à jour de l'état pour garantir l'accès à l'état actuel.

Gestion intégrée des événements :

Lorsque cela est possible, l'utilisation du mécanisme de gestion des événements DOM natif de React élimine le besoin de gestion manuelle des écouteurs d'événements.

Résumé

L'incohérence dans l'affichage de l'état avec la gestion des écouteurs d'événements peut être attribuée au traitement différent des gestionnaires d'événements au sein des composants concernés. En adoptant des solutions appropriées, les développeurs peuvent atténuer ce problème et maintenir un comportement d'état correct.

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!