Warum Pfeilfunktionen und Bindungen in React's Render problematisch sind

(Hinweis: Es macht shouldComponentUpdate und PureComponent verärgert)

In einem früheren Beitrag habe ich erklärt, wie untergeordnete Komponenten von React extrahiert werden, um die Verwendung von Bindungs- oder Pfeilfunktionen beim Rendern zu vermeiden. Aber ich habe keine klare Demo bereitgestellt, um zu zeigen, warum dies nützlich ist.

Hier ist ein kurzes Beispiel.

In diesem Beispiel verwende ich eine Pfeilfunktion beim Rendern, um die entsprechende Benutzer-ID an jede Löschtaste zu binden.

In Zeile 35 verwende ich eine Pfeilfunktion, um einen Wert an die Funktion deleteUser zu übergeben. Das ist ein Problem.

Um zu sehen, warum, überprüfen Sie User.js (klicken Sie auf das Hamburger-Symbol oben links, um verschiedene Dateien im Beispiel auszuwählen). Ich melde mich bei jedem Aufruf von Render an der Konsole an. Ich habe User als PureComponent deklariert. Daher sollte der Benutzer nur dann neu rendern, wenn sich die Requisiten oder der Status ändern. Aber wenn Sie sich für einen Benutzer auf Löschen klicken, Notiz , die machen wird für genannt alle Benutzer Instanzen .

Hier ist der Grund: Die übergeordnete Komponente gibt eine Pfeilfunktion für Requisiten weiter. Pfeilfunktionen werden bei jedem Rendern neu zugewiesen (dieselbe Story wie bei der Verwendung von bind). Obwohl ich User.js als PureComponent deklariert habe, bewirkt die Pfeilfunktion im übergeordneten Benutzer, dass die Benutzerkomponente eine neue Funktion für alle Benutzer auf Requisiten sendet. Jeder Benutzer rendert also erneut, wenn auf eine Schaltfläche zum Löschen geklickt wird. ?

Zusammenfassung:

Vermeiden Sie Pfeilfunktionen und Bindungen beim Rendern. Leistungsoptimierungen wie shouldComponentUpdate und PureComponent werden unterbrochen.

Was soll ich stattdessen tun?

Im Gegensatz dazu ist hier ein Beispiel, das beim Rendern keine Pfeilfunktion verwendet.

In diesem Beispiel hat index.js keine Pfeilfunktion beim Rendern. Stattdessen werden die relevanten Daten an User.js weitergegeben. In User.js ruft onDeleteClick die onClick-Funktion auf, die an Requisiten mit der entsprechenden user.id übergeben wurde.

Beachten Sie bei dieser Änderung, wenn Sie auf Löschen klicken, dass das Rendern für die anderen Benutzer nicht aufgerufen wird! ?

Zusammenfassung

Für eine optimale Leistung

  1. Vermeiden Sie Pfeilfunktionen und binden Sie beim Rendern.
  2. Wie? Extrahieren Sie untergeordnete Komponenten oder übergeben Sie Daten an das HTML-Element.

Suchen Sie mehr über Reagieren? ⚛️

Ich habe mehrere React- und JavaScript-Kurse zu Pluralsight verfasst (kostenlose Testversion). Mein neuestes "Erstellen wiederverwendbarer Reaktionskomponenten" wurde gerade veröffentlicht! ?

Cory House ist Autor mehrerer Kurse zu JavaScript, Reagieren, sauberem Code, .NET und mehr zu Pluralsight. Er ist Hauptberater bei reactjsconsulting.com, Software-Architekt bei VinSolutions, einem Microsoft MVP, und schult Softwareentwickler international in Software-Praktiken wie Front-End-Entwicklung und Clean Coding. Cory-Tweets über JavaScript und Front-End-Entwicklung auf Twitter als @housecor.