Perché gli oggetti di scena di JSX non dovrebbero usare le funzioni di freccia o bind?

Sono in esecuzione lint con la mia app React, e ho ricevuto questo errore:

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

Ed è qui che eseguo la funzione freccia (all’interno di onClick ):

 {this.state.photos.map(tile => (   this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={by {tile.author}} actionIcon={ this.handleDelete(tile)}>} >  this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>   ))} 

È una ctriggers pratica che dovrebbe essere evitata? E qual è il modo migliore per farlo?

Perché non dovresti usare le funzioni freccia inline nei puntelli JSX

Utilizzare le funzioni di freccia o l’associazione in JSX è una ctriggers pratica che danneggia le prestazioni, poiché la funzione viene ricreata su ogni rendering.

  1. Ogni volta che viene creata una funzione, la funzione precedente viene raccolta automaticamente. Rerenderizzare molti elementi potrebbe creare jank nelle animazioni.

  2. L’uso di una funzione di freccia in linea causerà la perdita di PureComponent e i componenti che utilizzano shallowCompare nel metodo shouldComponentUpdate per eseguire il rerender. Dal momento che la funzione della freccia viene ricreata ogni volta, il confronto superficiale la identifica come una modifica a un puntello e il componente verrà riorganizzato.

Come puoi vedere nei seguenti 2 esempi: quando utilizziamo la funzione freccia inline, il componente viene rerenderizzato ogni volta (la console mostra il testo del pulsante ‘rendering’).

Esempio 1: PureComponent senza gestore in linea

 class Button extends React.PureComponent { render() { const { onClick } = this.props; console.log('render button'); return (  ); } } class Parent extends React.Component { state = { counter: 0 } onClick = () => this.setState((prevState) => ({ counter: prevState.counter + 1 })); render() { const { counter } = this.state; return ( 
{ counter }
); } } ReactDOM.render( , document.getElementById('root') );
   

Ciò è dovuto al fatto che una funzione a forma di freccia creerà una nuova istanza della funzione su ogni rendering se utilizzata in una proprietà JSX. Ciò potrebbe creare un enorme sforzo per il garbage collector e ostacolerà inoltre il browser dall’ottimizzazione di qualsiasi “hot path” in quanto le funzioni verranno scartate invece di riutilizzate.

Puoi vedere l’intera spiegazione e altre informazioni su https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Per evitare di creare nuove funzioni con gli stessi argomenti, puoi memoizzare il risultato della funzione bind, ecco una semplice utility chiamata memobind per farlo: https://github.com/supnate/memobind