react-native
Best Practices darstellen

Einführung

Funktionen in JSX

Für eine bessere Leistung ist es wichtig, die Verwendung von Array (Lambda) -Funktionen in JSX zu vermeiden.

Wie unter https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md erläutert:

Eine Bindeaufruf- oder Pfeilfunktion in einem JSX-Requisit erstellt eine neue Funktion für jedes einzelne Rendering. Dies ist schlecht für die Leistung, da dies dazu führt, dass der Speicherbereiniger viel mehr als nötig aufgerufen wird. Es kann auch zu unnötigen Wiederholungen führen, wenn eine brandneue Funktion als Requisite an eine Komponente übergeben wird, die eine Überprüfung der Referenz auf Gleichheit der Requisite verwendet, um zu bestimmen, ob sie aktualisiert werden soll.

Also, wenn jsx Code-Block wie folgt haben:

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

oder

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

Sie können es besser machen:

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

und

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

Für den korrekten Kontext in der handleValueChanging-Funktion können Sie ihn im Konstruktor der Komponente anwenden:

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

beim Binden einer an eine Komponente übergebenen Funktion

Oder Sie können Lösungen wie diese verwenden: https://github.com/andreypopp/autobind-decorator und fügen Sie einfach @autobind decorator zu jedem Verfahren hinzu, an das Sie binden möchten:

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