Pourquoi ne pas JSX accessoires de flèche de fonctions ou de se lier?

Je suis en cours d'exécution de la charpie avec mon Réagir application, et je reçois cette erreur:

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

Et c'est là que je suis sur la flèche de la fonction (à l'intérieur de 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 qui devrait être évité? Et quelle est la meilleure façon de le faire?

OriginalL'auteur KadoBOT | 2016-04-17

8

C'est parce que une flèche fonction, apparemment, va créer une nouvelle instance de la fonction sur chaque rendu si utilisé dans un JSX de la propriété. Cela peut créer une énorme pression sur le garbage collector et empêchera le navigateur à partir d'optimiser tout chaud "chemins" étant donné que les fonctions seront jetées au lieu de les réutiliser.

Vous pouvez voir l'ensemble de l'explication et de quelques infos à https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Pas seulement. La création de la nouvelle fonction de cas chaque fois que les moyens de l'etat est modifiée et quand un état du composant est modifié, il sera ré-rendu. Puisque l'une des principales raisons de l'utilisation de Réagir est à seulement rendre des éléments de changement, en utilisant bind fléchées ou les fonctions ici est se tirer une balle dans le pied. Il est pas bien documenté, et en particulier dans le cas de travail avec mapde ping des tableaux dans les Listes, etc.
"La création de la nouvelle fonction de cas chaque fois que les moyens de l'etat est modifié" que voulez-vous dire par là? Il n'y a pas d'état du tout à la question

OriginalL'auteur Karl-Johan Sjögren
4

Éviter de créer de nouvelles fonctions avec les mêmes arguments, vous pourriez memoize la fonction bind résultat, ici, c'est un simple utilitaire nommé memobind: https://github.com/supnate/memobind

OriginalL'auteur supNate
0

À l'aide de fonctions inline comme ce qui est parfaitement correct. Le peluchage règle est obsolète.

Cette règle est d'une époque où la flèche fonctions n'étaient pas aussi commun et les gens sont utilisés .bind (), qui sert à être lent. Le problème a été corrigé dans Chrome 49.

Faites attention que vous ne passez pas de fonctions en ligne d'accessoires pour un composant enfant.

Ryan Florence, l'auteur de Réagir Routeur, a écrit un excellent article à ce sujet:

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Pouvez-vous s'il vous plaît montrer comment écrire un test unitaire sur les composants avec inline flèche fonctions? ˆˆ

OriginalL'auteur sbaechler
0

Vous pouvez utiliser la flèche fonctions à l'aide de réagir-en cache-gestionnaire bibliothèque, pas besoin d'être inquiet au sujet de re-performances de rendu :

Remarque : en Interne, il met en cache les flèches de votre fonctions par la clé spécifiée,
pas besoin d'être inquiet au sujet de re-rendu!
```
render() {

  return <div>
  {
        this.props.photos.map(photo=>
          <Photo key={photo.url}
            onClick={this.handler(photo.url, (url) => { 
                 console.log(url) })}
          />)
   }
 </div>

}
```
Autres caractéristiques:
- Nommé gestionnaires
- Gérer les événements par la flèche fonctions
- Accès à la clé, des arguments personnalisés et l'origine de l'événement
- Composant de rendu de performance
- Contexte personnalisé pour les gestionnaires
OriginalL'auteur Ghominejad

Vous devez vous connecter pour publier un commentaire.