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

É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!