Warum verursachen Pfeilfunktionen und Bindung Leistungsprobleme in JSX-Requisiten?

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, wenn eine Pfeilfunktion erstellt wird, wird die vorherige verworfen. Wenn mehrere Elemente mit Inline-Funktionen gerendert werden, kann dies zu abgehackten Animationen führen.
• Rendern: Inline-Pfeilfunktionen stören 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 Sie diese Beispiele:

Beispiel 1: PureComponent ohne Inline-Handler

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

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 <button onClick={() => props.onClick()}>Click</button>;
};

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 Variablendeklarationen.
• Verwenden Sie diese Bindung: Binden Sie für Klassenkomponenten Ereignisse Handler dafür im Konstruktor.
• Verwenden Sie Funktionen höherer Ordnung: Erwägen Sie die Verwendung von Funktionen höherer Ordnung wie Map oder bindActionCreators für eine effizientere Ereignisbehandlung in JSX.

Das obige ist der detaillierte Inhalt vonWarum verursachen Pfeilfunktionen und Bindung Leistungsprobleme in JSX-Requisiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!