Trois exemples de code de réaction buggy et comment les corriger

React propose plusieurs approches de codage pour les mêmes fonctionnalités. Bien qu'apparemment équivalent, certaines méthodes s'avèrent plus efficaces et maintenables. Cet article met en évidence trois exemples de code réactifs "buggy" courants, démontrant comment un code apparemment correct peut entraîner des problèmes évitables. Nous explorerons des solutions pour une maintenabilité, une résilience et une fonctionnalité améliorées.

Cet article assume la familiarité avec les crochets React. Pour les débutants, des ressources comme l'introduction de Kingsley Silas sur les astuces CSS ou la documentation officielle de réaction sont recommandées. Nous nous concentrerons sur des problèmes subtils qui, sans provoquer des accidents d'application, peuvent entraîner un comportement inattendu s'il est négligé.

Code de buggy # 1: État et accessoires mutés

La modification directe de l'état ou des accessoires dans React est un anti-motif significatif. Bien que apparemment fonctionnel dans certains cas, cette pratique peut introduire des bogues subtils.

Illustrons avec un exemple: un composant parent qui gérait un décompte et un enfant affichant ce nombre plus 5. Une approche naïve peut modifier directement les accessoires dans le composant enfant. Cela fonctionne initialement, mais des problèmes surviennent lorsque l'état est refactorisé pour utiliser un objet au lieu d'un numéro simple. En raison de la gestion par JavaScript des types de références primitifs vs, modifiant l'hélice d'objet dans le composant enfant modifie involontairement l'état du parent, conduisant à des incréments inattendus.

La solution

Évitez la mutation en calculant la valeur transformée directement dans la fonction de rendu du composant enfant:

 fonction child ({state}) {
  retour<div><p> comte 5 = {State.Count 5}</p></div> ;
}

Pour des scénarios plus complexes, créez une copie de l'hélice avant la transformation. Utilisez la syntaxe de propagation pour un clonage peu profond:

 fonction child ({state}) {
  const copy = {... state};
  retour<div><p> Compte 5 = {copy.Count 5}</p></div> ;
}

Pour les objets profondément imbriqués, considérez JSON.parse(JSON.stringify(myobject)) ou une bibliothèque comme deepClone de Lodash pour un clonage fiable. Alternativement, l'utilisation d'immuables.js assure l'immuabilité tout au long de vos structures de données.

Code de buggy # 2: État dérivé

L'utilisation d'accessoires pour initialiser l'état ("État dérivé") peut créer des problèmes. Lorsque l'état du composant parent change, l'état du composant enfant n'est pas affecté après son rendu initial. Cela viole le principe d'une seule source de vérité pour les données des composants.

La solution

Éviter l'état dérivé. Au lieu de cela, laissez le composant enfant gérer son propre état indépendamment. Si l'enfant a besoin de données du parent, passez-le comme un accessoire mais ne l'utilisez pas pour initialiser l'état de l'enfant.

Pour les scénarios nécessitant la réinitialisation de l'état enfant en fonction des modifications des parents (par exemple, édition des éléments dans une collection), utilisez le key . La modification des forces key réagit pour créer une nouvelle instance du composant enfant, réinitialisant efficacement son état.

Code de buggy # 3: bogues de fermeture obsolète

Les fermetures périmées sont un problème courant avec useEffect et les gestionnaires d'événements. Les opérations asynchrones au sein de useEffect peuvent utiliser un état ou des accessoires obsolètes si le tableau de dépendance n'est pas correctement géré.

La solution

Pour les opérations asynchrones dans useEffect , utilisez le formulaire de mise à jour fonctionnel de setState pour vous assurer que la fermeture utilise la dernière valeur d'état:

 useEFFECT (() => {
  Selt id = setInterval (() => {
    setCount (prevCount => prevCount 1);
  }, 1000);
  return () => clearInterval (id);
}, []);

Alternativement, utilisez useRef pour maintenir une référence mutable à la valeur de l'état. Pour les gestionnaires d'événements, assurez-vous d'accéder aux dernières valeurs d'état en les faisant référence dans la fonction du gestionnaire ou refactor pour gérer la manipulation DOM dans le cycle de rendu du composant React.

Conclusion

Une attention particulière à la gestion de l'État et au comportement de fermeture est cruciale pour éviter les bogues subtils dans les applications React. Comprendre ces pièges communs et leurs solutions conduit à un code plus robuste et maintenable. N'oubliez pas de tirer parti des fonctionnalités de React efficacement et de consulter les ressources énumérées pour une compréhension plus approfondie.

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!