Pourquoi les accessoires JSX ne doivent pas utiliser les fonctions de flèche

Je fais de la charpie avec mon application React et je reçois cette erreur

error JSX props should not use arrow functions react/jsx-no-bind 

Et c'est là que j'utilise la fonction de flèche (in onClick):

 {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>} > <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/> </GridTile> </span> ))} 

Est-ce une mauvaise pratique et devrait être évitée? Et quelle est la meilleure façon de le faire?

Pourquoi ne pas utiliser les fonctions de flèches en ligne dans les accessoires JSX

L'utilisation des fonctions fléchées ou de la liaison dans JSX est une mauvaise pratique qui fait mal aux performances car, sur chaque rendu, la fonction est recréée.

  1. Chaque fois qu'une fonction est créée, la fonction précédente est collectée. Rerendering beaucoup d'éléments peut créer jank dans les animations.

  2. L'utilisation d'une fonction de flèche en ligne entraînera PureComponent s et les composants qui utilisent shallowCompare dans la méthode shouldComponentUpdate pour remanier de toute façon. Étant donné que la fonction de fonction de la flèche est recréée à chaque fois, la comparaison peu profonde l'identifie comme une modification d'un accessoire, et le composant sera renvoyé.

Comme vous pouvez le voir dans les 2 exemples suivants – lorsque nous utilisons la fonction de flèche en ligne, le composant <Button> est rerendered à chaque fois (la console affiche le texte 'bouton de rendu').

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> ); } } class Parent extends React.Component { state = { counter: 0 } onClick = () => this.setState((prevState) => ({ counter: prevState.counter + 1 })); render() { const { counter } = this.state; return ( <div> <Button onClick={ this.onClick } /> <div>{ counter }</div> </div> ); } } ReactDOM.render( <Parent />, document.getElementById('root') ); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> <div id="root"></div> 

C'est parce qu'une fonction de flèche apparemment créera une nouvelle instance de la fonction sur chaque rendu si elle est utilisée dans une propriété JSX. Cela pourrait créer une énorme pression sur le collecteur d'ordures et empêchera le navigateur d'optimiser les "chemins chauds" car les fonctions seront rejetées au lieu de les réutiliser.

Vous pouvez voir toute l'explication et plus d'informations à l' adresse https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Pour éviter de créer de nouvelles fonctions avec les mêmes arguments, vous pouvez memoiser le résultat de la liaison de fonction, voici un utilitaire simple appelé memobind pour le faire: https://github.com/supnate/memobind