Warum die Verwendung von Pfeilfunktionen oder Bind in JSX-Requisiten ein No-No ist

Bei der Verwendung von React ist es wichtig, die Verwendung von Pfeilfunktionen oder zu vermeiden Bindung in JSX-Requisiten. Diese Vorgehensweise kann zu Leistungsproblemen und falschem Verhalten führen.

Leistungsprobleme

Die Verwendung von Pfeilfunktionen oder die Bindung innerhalb von JSX-Requisiten erzwingt, dass diese Funktionen bei jedem Rendern neu erstellt werden. Das bedeutet:

• Die alte Funktion wird verworfen, was die Speicherbereinigung auslöst.
• Kontinuierliches Rendern vieler Elemente kann zu Leistungsschwankungen führen.
• Komponenten, die auf PureComponents basieren oder sollteComponentUpdate aufgrund der sich ändernden Pfeilfunktion immer noch erneute Renderings auslösen. () => this.handleDelete(tile)}

Dieser Code erstellt bei jedem Rendern eine neue Funktion, was dazu führt, dass React die Komponente als schmutzig markiert und ein erneutes Rendern auslöst. Selbst wenn sich die Kachelstütze nicht geändert hat, wird die Komponente erneut gerendert, da die Pfeilfunktion anders ist.

Best Practices

Um diese Fallstricke zu vermeiden, verwenden Sie die Folgende Best Practices:

onClick={() => this.handleDelete(tile)}

Binden Sie den Event-Handler im Konstruktor:

constructor(props) { super(Requisiten); this.handleDelete = this.handleDelete.bind(this); }

• Erstellen Sie eine Pfeilfunktion außerhalb der Rendermethode:

const handleDelete = Tile => { // Löschlogik behandeln };

onClick={() => this.handleDelete(tile)}

Zusätzlicher Hinweis:
• Es ist wichtig zu beachten, dass Pfeilfunktionen völlig in Ordnung sind, wenn sie in anderen Teilen der Komponente verwendet werden, beispielsweise innerhalb der Render-Methode. Sie sollten jedoch vermieden werden, wenn Sie Event-Handler JSX-Requisiten zuweisen.