react-native
Best practices weergeven

Invoering

Functies in JSX

Voor betere prestaties is het belangrijk om het gebruik van de array (lambda) -functie in JSX te vermijden.

Zoals uitgelegd op https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md :

Een bind-aanroep of pijlfunctie in een JSX-prop maakt een nieuwe functie bij elke afzonderlijke weergave. Dit is slecht voor de prestaties, omdat het ertoe zal leiden dat de vuilnisman veel meer wordt aangeroepen dan nodig is. Het kan ook onnodige re-renderingen veroorzaken als een gloednieuwe functie wordt doorgegeven als een prop aan een component die een referentie-gelijkheidscontrole op de prop gebruikt om te bepalen of deze moet worden bijgewerkt.

Dus als jsx-codeblok als volgt:

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

of

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

je kunt het beter maken:

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

en

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

Voor de juiste context binnen de functie handleValueChanging kunt u deze toepassen in de constructor van de component:

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

meer in het binden van een functie die aan een component is doorgegeven

Of u kunt oplossingen als deze gebruiken: https://github.com/andreypopp/autobind-decorator en eenvoudig @autobind decorator toevoegen aan elke methos die u wilt binden:

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