Pourquoi devriez-vous éviter les fonctions fléchées ou les liaisons dans les accessoires JSX ?

Pourquoi utiliser les fonctions fléchées ou Bind dans les accessoires JSX est un non-non

Lors de l'utilisation de React, il est important d'éviter d'utiliser des fonctions fléchées ou liaison dans les accessoires JSX. Cette pratique peut entraîner des problèmes de performances et un comportement incorrect.

Mauvais performances

L'utilisation de fonctions fléchées ou de liaisons dans les accessoires JSX force la recréation de ces fonctions à chaque rendu. Cela signifie que :

• L'ancienne fonction est supprimée, déclenchant le garbage collection.
• Le rendu continu de nombreux éléments peut entraîner une instabilité des performances.
• Les composants s'appuyant sur PureComponents ou ShouldComponentUpdate déclenche toujours des rendus en raison de la modification de l'accessoire de fonction de flèche.

Comportement incorrect

Considérez l'exemple suivant :

onClick={() => this.handleDelete(tile)}

Ce code créera une nouvelle fonction à chaque rendu, obligeant React à marquer le composant comme sale et à déclencher un nouveau rendu. Même si l'accessoire de tuile n'a pas changé, le composant sera restitué car la fonction de la flèche est différente.

Bonnes pratiques

Pour éviter ces pièges, utilisez l'option bonnes pratiques suivantes :

• Lier le gestionnaire d'événements dans le constructeur :

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• Créer une fonction de flèche à l'extérieur de la méthode de rendu :

const handleDelete = tile => {
  // Handle delete logic
};

Remarque supplémentaire :

Il est important de noter que les fonctions fléchées conviennent parfaitement lorsqu'elles sont utilisées dans d'autres parties du composant, comme dans la méthode de rendu. Cependant, ils doivent être évités lors de l'attribution de gestionnaires d'événements aux accessoires JSX.

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!