Les attributs Lambda dans JSX sont-ils un anti-modèle?

Question

J'ai commencé à utiliser un nouveau linter aujourd'hui (tslint-réagir) et il me donne le message d'avertissement suivant:

"Lambdas sont interdits dans JSX attributs en raison de leur impact sur les performances de rendu"

Je reçois ce que cela provoque une nouvelle fonction qui doit être créé avec chaque rendu. Et qu'il pourrait déclencher inutile de re-rend parce que l'enfant composant pense que c'est les accessoires ont changé.

Mais ma question est, comment peut-on passer des paramètres à un gestionnaire d'événement à l'intérieur d'une boucle:

customers.map( c => <Btn onClick={ () => this.deleteCust(c.id) } /> );

Answer 1

Certainement pas un antipattern.

Les Lambdas (flèche fonctions) n'ont aucun impact sur les performances de rendu.

La seule chose qui a un impact sur la mise en œuvre d' shouldComponentUpdate. Cette fonction renvoie true par défaut, ce qui signifie que le composant est toujours rendu. Cela signifie que même si les accessoires ne change pas, le composant est toujours rendu à nouveau. Et c'est le comportement par défaut.

Changement de flèche en fonction d'une méthode liée de ne pas améliorer les performances si vous ne mettez pas en œuvre shouldComponentUpdate.

C'est vrai que ne pas utiliser la flèche fonctions permettent de simplifier la mise en œuvre de l' shouldComponentUpdate et ils ne doivent pas être utilisés avec de l' PureComponent , mais ils ne sont pas un antipattern. Ils peuvent simplifier de nombreux modèles, par exemple lors de l'ajout d'un paramètre supplémentaire à la fonction (par exemple ce que vous faites dans votre exemple).

Notez également que Réagir a apatrides composants qui ne peuvent même mettre en œuvre shouldComponentUpdate et, par conséquent, ils sont toujours rendus.

Ne pense pas à l'impact sur les performances jusqu'à ce que vous trouver réellement un problème de performance.

Answer 2

Je ne sais pas pourquoi ils sont / ne sont pas autorisés, mais peu importe; Javascript nous permet de déclarer des fonctions dans des blocs de code comme ça

 function mapCustomersToButton(c) {
  function handleBtnClick() {
    this.deleteCust(c.id);
  }

  return <Btn onClick={handleBtnClick} />
}

return customers.map(mapCustomersToButton);
 

La fonction handleBtnClick crée une fermeture autour de l'objet c est transmis à partir de la fonction mapCustomersToButton ; conserver la référence.

Cela équivaut à ce qui suit:

 return customers.map(c => <Btn onClick={() => this.deleteCust(c.id)} />);