react-native
Gör bästa metoder

Introduktion

Funktioner i JSX

För bättre prestanda är det viktigt att undvika att använda array (lambda) -funktion i JSX.

Som förklarats på https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md :

En bindande samtal eller pilfunktion i en JSX-prop kommer att skapa en helt ny funktion på varje rendering. Detta är dåligt för prestanda, eftersom det kommer att leda till att sopor samlaren åberopas mycket mer än nödvändigt. Det kan också orsaka onödiga återgivningar om en helt ny funktion skickas som en rekvisita till en komponent som använder referenslikhetskontroll på rekvisiten för att avgöra om den ska uppdateras.

Så om har jsx-kodblock så här:

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

eller

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

du kan göra det bättre:

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

och

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

För korrekt kontext inom handleValueChanging-funktionen kan du använda den i konstruktör av komponenten:

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

mer för att binda en funktion som skickas till en komponent

Eller så kan du använda lösningar som denna: https://github.com/andreypopp/autobind-decorator och helt enkelt lägga till @autobind dekoratör till varje metos som du vill binda till:

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