React.memo und seine Verwendung

1. Was ist React.memo
2. Was React.memo macht

React ist beliebt, weil es Entwicklern ermöglicht, dynamische Anwendungen zu erstellen.

Das Standardverhalten von React-Komponenten ist jedoch ineffizient. Die Bibliothek enthält PureComponent für Klassenkomponenten und React.memo HOC für funktionale Komponenten, um dieses Problem anzugehen.

Diese Lösungen können die Anzahl der Aktualisierungen von Komponenten reduzieren und React-Anwendungen viel effizienter machen. Dieser Artikel wird untersuchen, was React.memo macht und wie man es benutzt.

Was ist React.memo

React.memo ist eine Komponente höherer Ordnung, die normale Funktionskomponenten in React umschließt.

Wenn die Komponente keine Seiteneffekte hat und die gleiche Ausgabe mit den gleichen Requisiten rendert, kann React.memo die Geschwindigkeit und Leistung Ihrer Komponente verbessern.

Die in die übergeordnete Komponente React.memo eingeschlossene App und alle ihre untergeordneten Elemente werden nur dann erneut gerendert, wenn sich die Requisiten ändern. Die untergeordneten Komponenten im Baum werden ebenfalls neu gerendert, wenn sich ihr lokaler Status oder Kontext ändert.

Hier ist ein Beispiel für eine Komponente, die in React.memo HOC verpackt ist:

const App = React.memo(() => {
  return <p>Hello World</p>;
});

Jeder Komponentenbaum unter der Komponente App wird ebenfalls beeinflusst. Hier ist ein Link zum Playcode.

Was React.memo macht

Alle Komponenten in React haben eine Standardmethode shouldComponentUpdate(), die jedes Mal, wenn sich ihre eigenen Props oder die Props ihrer Eltern ändern, ein erneutes Rendern auslöst.

Das Verpacken einer Komponente in React.memo HOC kann dieses Standardverhalten ändern. Nach dem Umschließen ändert sich die Methode shouldComponentUpdate(), und die Komponente und alle ihre untergeordneten Elemente werden nur dann erneut gerendert, wenn sich der lokale Status oder die Requisiten ändern.

Die Methode führt einen flachen Vergleich des Zustands und der Requisiten durch, um zu bestimmen, wann erneut gerendert werden muss. Wenn Sie sich die Reihenfolge ansehen, in der Lifecycle-Methoden aufgerufen werden, steht shouldComponentUpdate() immer vor der Render-Methode, wie es sein sollte.

Das shouldComponentUpdate() wird also jedes Mal aufgerufen, wenn sich die Props ändern. Die Komponente und die untergeordneten Elemente werden jedoch nur dann erneut gerendert, wenn der flache Vergleich feststellt, dass sich ihre Requisiten geändert haben.

Leistungsgewinne

Durch die Reduzierung unnötiger Updates kann das Auswendiglernen (Einpacken einer React-Komponente in React.memo HOC) die Leistung Ihrer App erheblich verbessern.

Sie können Ihre Komponente in React.memo einhüllen, oder Sie können einige Zweige des Komponentenbaums selektiv umhüllen. Sie können Profiling-Tools verwenden, um herauszufinden, ob Ihre App signifikant genug Ineffizienzen aufweist, um die Verwendung von React.memo zu rechtfertigen.

Als Faustregel gilt, dass der flache Vergleich von props-Objekten immer billiger ist, als React.createElement() aufzurufen und ganze Komponentenbäume zu vergleichen.

Wenn Ihre Komponente jedoch tief vergleichende Props hat, wird der flache Vergleich von React.memo nicht ausreichen. Außerdem funktioniert diese Komponente höherer Ordnung nicht, wenn Ihre Komponente untergeordnete Prop-Werte empfängt und anzeigt.