Pourquoi les fonctions fléchées et les liaisons provoquent-elles des problèmes de performances dans les accessoires JSX ?

Évitez les fonctions fléchées et les liaisons dans les accessoires JSX pour des performances optimales

L'outil lint de React vise à améliorer les pratiques de code en mettant en évidence les problèmes potentiels. Un message d'erreur courant est "Les accessoires JSX ne doivent pas utiliser de fonctions fléchées". Cela souligne les effets néfastes de l'utilisation de fonctions fléchées ou de liaisons dans les accessoires JSX.

Pourquoi les fonctions fléchées et les liaisons entravent les performances

L'intégration de fonctions fléchées ou de liaisons dans les accessoires JSX a implications sur les performances :

• Garbage Collection : Chaque fois qu'une fonction de flèche est créée, la précédente est supprimée. Si plusieurs éléments sont rendus avec des fonctions en ligne, cela peut conduire à des animations saccadées.
• Rendu : Les fonctions de flèche en ligne interfèrent avec les mécanismes de comparaison superficiels utilisés par PureComponents et les composants employant la méthode ShouldComponentUpdate. Comme l'accessoire de fonction de flèche est recréé à chaque fois, il est détecté comme un changement d'accessoire, déclenchant un rendu inutile.

Impact des gestionnaires en ligne sur le rerendu

Considérez ces exemples :

Exemple 1 : PureComponent sans gestionnaire en ligne

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return <button onClick={onClick}>Click</button>;
  }
}

Dans ce code, le composant Button n'est restitué que lorsque ses accessoires changent, comme prévu pour un PureComponent .

Exemple 2 : PureComponent avec gestionnaire en ligne

const Button = (props) => {
  console.log('render button');
  return <button onClick={() => props.onClick()}>Click</button>;
};

En raison de la fonction de flèche en ligne, Button est désormais restitué à chaque fois, même si l'état du composant reste inchangé. Ce rendu inutile peut avoir un impact significatif sur les performances.

Bonnes pratiques

Pour éviter ces problèmes de performances, il est recommandé de respecter les bonnes pratiques suivantes :

• Définissez vos gestionnaires d'événements en dehors de JSX : Extrayez les fonctions fléchées ou liez les méthodes dans des déclarations de variables distinctes.
• Utilisez cette liaison : Pour les composants de classe, liez l'événement gestionnaires pour cela dans le constructeur.
• Utilisez des fonctions d'ordre supérieur : Envisagez d'utiliser des fonctions d'ordre supérieur comme map ou bindActionCreators pour une gestion plus efficace des événements dans 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!