react-native
Renderuj najlepsze praktyki

Wprowadzenie

Funkcje w JSX

Aby uzyskać lepszą wydajność, ważne jest, aby unikać używania funkcji tablicowej (lambda) w JSX.

Jak wyjaśniono na https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md :

Wywołanie lub funkcja strzałki w rekordzie JSX utworzy zupełnie nową funkcję na każdym renderowaniu. Jest to niekorzystne z punktu widzenia wydajności, ponieważ spowoduje, że moduł wyrzucania elementów bezużytecznych zostanie wywołany o wiele bardziej niż to konieczne. Może to również powodować niepotrzebne ponowne renderowanie, jeśli zupełnie nowa funkcja zostanie przekazana jako rekwizyt do komponentu, który korzysta z kontroli równości odniesienia na rekwidzie w celu ustalenia, czy należy go zaktualizować.

Więc jeśli masz taki blok kodu jsx:

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

lub

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

możesz to poprawić:

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

i

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

Aby uzyskać poprawny kontekst w funkcji handleValueChanging, możesz zastosować go w konstruktorze komponentu:

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

więcej w wiązaniu funkcji przekazanej do komponentu

Lub możesz użyć takich rozwiązań: https://github.com/andreypopp/autobind-decorator i po prostu dodaj dekorator @autobind do każdego metosu, z którym chcesz się połączyć:

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