Pourquoi les fonctions de flèche et la liaison dans le rendu de React sont-elles problématiques?

(Indice: cela rend shouldComponentUpdate et PureComponent grincheux)

Dans un article précédent, j'ai expliqué comment extraire les composants enfants de React pour éviter d'utiliser les fonctions de liaison ou de flèche dans le rendu. Mais je n'ai pas fourni de démo claire pour montrer pourquoi cela est utile.

Voici un exemple rapide.

Dans cet exemple, j'utilise une fonction de flèche dans le rendu pour lier l'ID utilisateur pertinent à chaque bouton de suppression.

À la ligne 35, j'utilise une fonction de flèche pour passer une valeur à la fonction deleteUser. C'est un problème.

Pour voir pourquoi, consultez User.js (cliquez sur l'icône hamburger en haut à gauche pour sélectionner différents fichiers dans l'exemple). Je me connecte à la console chaque fois que le rendu est appelé. J'ai déclaré User comme PureComponent. Ainsi, l'utilisateur ne doit effectuer un nouveau rendu que lorsque les accessoires ou l'état changent. Mais lorsque vous cliquez sur supprimer pour un utilisateur, notez que le rendu est appelé pour toutes les instances User .

Voici pourquoi: Le composant parent transmet une fonction de flèche sur les accessoires. Les fonctions fléchées sont réallouées sur chaque rendu (même histoire avec l'utilisation de bind). Ainsi, même si j'ai déclaré User.js comme PureComponent, la fonction de flèche dans le parent de l'utilisateur fait que le composant User voit une nouvelle fonction envoyée sur les accessoires pour tous les utilisateurs. Ainsi, chaque utilisateur effectue un nouveau rendu lorsque l' utilisateur clique sur un bouton de suppression. ?

Sommaire:

Évitez les fonctions fléchées et les liaisons dans le rendu. Il rompt les optimisations de performances comme shouldComponentUpdate et PureComponent.

Que dois-je faire à la place?

Pour le contraste, voici un exemple qui n'utilise pas de fonction de flèche dans le rendu.

Dans cet exemple, index.js n'a pas de fonction de flèche dans le rendu. Au lieu de cela, les données pertinentes sont transmises à User.js. Dans User.js, onDeleteClick appelle la fonction onClick transmise aux accessoires avec le user.id correspondant.

Avec ce changement, lorsque vous cliquez sur supprimer, notez que le rendu n'est pas appelé pour les autres utilisateurs! ?

Sommaire

Pour des performances optimales,

  1. Évitez les fonctions fléchées et liez dans le rendu.
  2. Comment? Extrayez les composants enfants ou transmettez des données sur l'élément HTML.

Vous en voulez plus sur React? ⚛️

J'ai écrit plusieurs cours React et JavaScript sur Pluralsight (essai gratuit). Mon dernier, «Création de composants React réutilisables» vient de paraître! ?

Cory House est l'auteur de plusieurs cours sur JavaScript, React, Clean Code, .NET et plus sur Pluralsight. Il est consultant principal chez reactjsconsulting.com, architecte logiciel chez VinSolutions, MVP Microsoft, et forme des développeurs de logiciels à l'échelle internationale sur les pratiques logicielles telles que le développement frontal et le codage propre. Cory tweete sur JavaScript et le développement frontal sur Twitter en tant que @housecor.