Maison >interface Web >js tutoriel >Pourquoi devriez-vous éviter d'utiliser les fonctions fléchées ou la liaison dans les accessoires JSX ?

Pourquoi devriez-vous éviter d'utiliser les fonctions fléchées ou la liaison dans les accessoires JSX ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-06 21:49:02427parcourir

Why Should You Avoid Using Arrow Functions or Bind in JSX Props?

Évitez d'utiliser les fonctions fléchées ou la liaison dans les accessoires JSX

Pourquoi c'est une mauvaise pratique :

L'utilisation de fonctions fléchées ou de liaison dans les accessoires JSX est déconseillée car cela a un impact négatif sur les performances. Voici les raisons :

  • Grbage Collection inefficace : La création de fonctions sur chaque rendu déclenche un garbage collection inutile lorsque le composant est démonté.
  • Rendus dus à Comparaison superficielle : PureComponents et les composants utilisant ShallowCompare dans ShouldComponentUpdate() sont restitués même si la valeur de la prop reste inchangée, car la fonction prop en ligne est recréée à chaque fois.

Exemple :

Sans fonction de flèche en ligne :

<Button onClick={() => console.log('clicked')} />

Le bouton ne sera pas rendu à moins que ses autres accessoires ne changent.

Avec flèche en ligne Fonction :

<Button onClick={this.handleClick} />

Le bouton sera restitué à chaque rendu du composant, même si le gestionnaire reste le même.

Meilleure pratique :

Pour éviter ces problèmes de performances, déclarez des fonctions fléchées ou des méthodes liées en dehors de JSX :

class Button extends React.Component {
  handleClick = () => {
    // Handler logic
  };

  render() {
    return <button onClick={this.handleClick} />;
  }
}

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn