Leistungsoptimierung ist ein wichtiger Aspekt beim Erstellen skalierbarer React-Anwendungen. Wenn Ihr Komponentenbaum wächst, kann unnötiges erneutes Rendern Ihre App verlangsamen. Glücklicherweise bietet React zwei nützliche Hooks – React.memo() und useMemo() – die helfen, unnötige Renderings zu reduzieren, indem sie Komponenten und Werte auswendig lernen.
In diesem Artikel befassen wir uns mit den Unterschieden zwischen React.memo() und useMemo(), der jeweiligen Verwendung und einigen häufigen Fallstricken, die es zu vermeiden gilt.
-
Nutzung verstehenMemo: Kostenberechnungen optimieren
In React wird der useMemo-Hook verwendet, um das Ergebnis einer teuren Berechnung oder Operation zu speichern, um zu verhindern, dass es bei jedem Rendern neu berechnet wird. useMemo gibt einen gespeicherten Wert zurück und React berechnet ihn nur dann neu, wenn sich eine seiner Abhängigkeiten ändert. Dies hilft bei der Leistungsoptimierung, insbesondere bei intensiven Einsätzen.
Beispiel:
In diesem Beispiel wird die teure Berechnung (Zahl * 2) nur dann neu berechnet, wenn sich die Zahlenstütze ändert, nicht bei jedem erneuten Rendern aufgrund des Zählstatus . Ohne useMemo würde die Berechnung bei jedem Rendern durchgeführt werden, was möglicherweise die Leistung beeinträchtigen würde.
-
Wann sollte useMemo() verwendet werden?
- Sie haben eine rechenintensive Funktion, die nicht bei jedem Rendern erneut ausgeführt werden muss.
- Die Berechnung beinhaltet starke Datenmanipulation, Filterung oder Sortierung, die auf stabilen Eingaben beruht.
Wie React.memo() nicht überbeanspruchen verwenden Sie Memo() für einfache Berechnungen, da es unnötige Komplexität mit sich bringt und möglicherweise keine wesentlichen Leistungsverbesserungen bietet.
-
React.memo verstehen: Unnötige erneute Renderings vermeiden
Nachdem wir uns nun angeschaut haben, wie useMemo teure Berechnungen optimieren kann, sprechen wir über die Vermeidung unnötiger erneuter Renderings auf Komponentenebene.
Standardmäßig wenn eine übergeordnete Komponente erneut gerendert wird, werden auch ihre untergeordneten Komponenten neu gerendert, selbst wenn sich die an die untergeordnete Komponente übergebenen Requisiten nicht geändert haben. Hier kommt React.memo ins Spiel.
React.memo ist eine Komponente höherer Ordnung, die das Ergebnis einer Funktionskomponente speichert. Dadurch wird sichergestellt, dass die untergeordnete Komponente nur dann erneut gerendert wird, wenn sich ihre Requisiten geändert haben.
Beispiel:
Wenn in diesem Beispiel der otherState umschaltet, wird die ParentComponent erneut gerendert, aber die ChildComponent wird nicht erneut gerendert, solange die Anzahl prop gleich bleibt. Dies optimiert die Leistung, indem unnötiges erneutes Rendern verhindert wird.
-
Wann sollte React.memo() verwendet werden?
- Ihre Komponente wird mit denselben Requisiten neu gerendert.
- Die Komponente rendert große Datenmengen oder komplexe Benutzeroberflächen, bei denen unnötiges erneutes Rendern die Leistung beeinträchtigen kann.
Seien Sie jedoch vorsichtig. Eine übermäßige Verwendung von React.memo() kann den gegenteiligen Effekt haben, wenn sich die Requisiten der Komponente häufig ändern, da React bei jedem Rendern die neuen und vorherigen Requisiten vergleichen muss.
-
Hauptunterschiede zwischen React.memo() und useMemo()
-
React.memo(): Wird zum Speichern ganzer Komponenten verwendet, um ein erneutes Rendern zu verhindern, wenn sich Requisiten nicht geändert haben.
-
useMemo(): Wird verwendet, um einen berechneten Wert zu speichern, um unnötige Neuberechnungen innerhalb einer Komponente zu verhindern.
Im Wesentlichen optimiert React.memo() Komponenten, während useMemo() Werte oder Berechnungen innerhalb von Komponenten optimiert.
-
Häufige Fallstricke, die es zu vermeiden gilt
-
Überoptimierung mit Memoisierung: Sowohl React.memo() als auch useMemo() führen zusätzliche Berechnungen ein, um Abhängigkeiten oder Requisiten zu überprüfen. Wenn Sie sie in Komponenten, die nicht von der Memoisierung profitieren, übermäßig verwenden, kann dies zu unnötiger Komplexität und sogar zu Leistungseinbußen führen.
-
Prop-Mutationen ignorieren: React.memo() führt einen oberflächlichen Vergleich von Props durch. Wenn es sich bei den Requisiten um komplexe Objekte oder Arrays handelt, kann bereits eine geringfügige Mutation ein erneutes Rendern auslösen. Erwägen Sie die Verwendung von useCallback() in Kombination mit React.memo(), um Funktionen als Requisiten zu behandeln.
Fazit:
Sowohl React.memo() als auch useMemo() sind leistungsstarke Tools zur Optimierung Ihrer React-Apps, aber zu wissen, wann und wie man sie effektiv nutzt, ist der Schlüssel. Erstellen Sie zunächst ein Profil Ihrer App, identifizieren Sie Komponenten oder Berechnungen, die unnötige erneute Renderings verursachen, und wenden Sie dann die Memoisierung dort an, wo es sinnvoll ist.
Denken Sie daran, dass das Ziel nicht darin besteht, sich alles zu merken, sondern gezielt auf bestimmte Engpässe zu reagieren, um die Leistung zu steigern!
Wenn Ihnen dieser Artikel gefallen hat, verbinden Sie sich mit mir auf LinkedIn oder folgen Sie mir auf Dev.to, um weitere React-Tipps und Einblicke zu erhalten. Haben Sie Fragen oder möchten Sie Ihre Erfahrungen teilen? Schreiben Sie unten einen Kommentar!
Das obige ist der detaillierte Inhalt vonReact.memo vs. useMemo: So optimieren Sie die Leistung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
