react-native
Rendi migliori pratiche

introduzione

Funzioni in JSX

Per prestazioni migliori è importante evitare l'uso della funzione array (lambda) in JSX.

Come spiegato su https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md :

Una funzione di bind call o arrow in un puntello JSX creerà una nuova funzione su ogni singolo rendering. Ciò non è positivo per le prestazioni, poiché il garbage collector viene richiamato molto più del necessario. Può anche causare ri-rendering inutili se una funzione nuova di zecca viene passata come supporto a un componente che utilizza il controllo di uguaglianza di riferimento sul puntello per determinare se deve essere aggiornato.

Quindi se hai un blocco di codice jsx come questo:

                    <TextInput
                      onChangeValue={  value => this.handleValueChanging(value) }
                    />

o

                    <button onClick={ this.handleClick.bind(this) }></button>

puoi renderlo migliore:

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

e

                    <button onClick={ this.handleClick }></button>

Per il contesto corretto all'interno della funzione handleValueChanging puoi applicarlo nel costruttore del componente:

          constructor(){
            this.handleValueChanging = this.handleValueChanging.bind(this)
          }

più nel legare una funzione passata a un componente

Oppure puoi usare soluzioni come questa: https://github.com/andreypopp/autobind-decorator e aggiungi semplicemente @autobind decorator a ogni methos che vuoi associare a:

        @autobind
        handleValueChanging(newValue)
        {
            //processing event
        }