react-native
Meilleures pratiques de rendu

Introduction

Fonctions dans JSX

Pour de meilleures performances, il est important d'éviter d'utiliser la fonction array (lambda) dans JSX.

Comme expliqué à l' adresse https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md :

Un appel de liaison ou une fonction de flèche dans un accessoire JSX créera une nouvelle fonction sur chaque rendu. Cela est mauvais pour les performances, car le récupérateur de mémoire sera plus sollicité que nécessaire. Cela peut également entraîner des rendus inutiles si une nouvelle fonction est transmise en tant que prop à un composant qui utilise la vérification d'égalité de référence sur le prop pour déterminer s'il doit être mis à jour.

Donc, si jsx bloque le code comme ceci:

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

ou

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

vous pouvez le rendre meilleur:

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

et

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

Pour un contexte correct dans la fonction handleValueChanging, vous pouvez l'appliquer dans le constructeur du composant:

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

plus en liant une fonction passée à un composant

Ou vous pouvez utiliser des solutions comme celle-ci: https://github.com/andreypopp/autobind-decorator et ajouter simplement @autobind decorator à chaque méthode à laquelle vous souhaitez vous connecter:

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