Vermeiden Sie Pfeilfunktionen und binden Sie in JSX-Requisiten für optimale Leistung

Das Lint-Tool von React zielt darauf ab, Codepraktiken zu verbessern, indem es potenzielle Probleme hervorhebt. Eine häufige Fehlermeldung lautet: „JSX-Requisiten sollten keine Pfeilfunktionen verwenden.“ Dies weist auf die nachteiligen Auswirkungen der Verwendung von Pfeilfunktionen oder Bindung innerhalb von JSX-Requisiten hin.

Warum Pfeilfunktionen und Bindung die Leistung beeinträchtigen

Die Integration von Pfeilfunktionen oder Bindung in JSX-Requisiten hat Auswirkungen Auswirkungen auf die Leistung:

• Garbage Collection: Jedes Mal ein Pfeil Wenn eine Funktion erstellt wird, wird die vorherige verworfen. Wenn mehrere Elemente mit Inline-Funktionen gerendert werden, kann dies zu abgehackten Animationen führen.
• Rendern: Inline-Pfeilfunktionen beeinträchtigen die flachen Vergleichsmechanismen, die von PureComponents und Komponenten verwendet werden, die die Methode ShouldComponentUpdate verwenden. Da die Pfeilfunktions-Requisite jedes Mal neu erstellt wird, wird sie als Requisitenänderung erkannt, was ein unnötiges erneutes Rendern auslöst.

Auswirkungen von Inline-Handlern auf das erneute Rendern

Bedenken diese Beispiele:

Beispiel 1: PureComponent ohne Inline Handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

In diesem Code wird die Button-Komponente nur dann neu gerendert, wenn sich ihre Requisiten ändern, wie es für eine PureComponent erwartet wird.

Beispiel 2: PureComponent mit Inline-Handler

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

Aufgrund der Inline-Pfeilfunktion wird Button jetzt jedes Mal neu gerendert, auch wenn der Komponentenstatus unverändert bleibt. Dieses unnötige erneute Rendern kann die Leistung erheblich beeinträchtigen.

Best Practices

Um diese Leistungsprobleme zu vermeiden, wird empfohlen, die folgenden Best Practices einzuhalten:

• Definieren Sie Ihre Event-Handler außerhalb von JSX: Extrahieren Sie Pfeilfunktionen oder binden Sie Methoden in separate Variablen Deklarationen.
• Verwenden Sie diese Bindung: Binden Sie für Klassenkomponenten Event-Handler im Konstruktor daran.
• Verwenden Sie Funktionen höherer Ordnung: Bedenken Sie Verwenden von Funktionen höherer Ordnung wie Map oder bindActionCreators für eine effizientere Ereignisbehandlung in JSX.