Spickzettel zur Reagieren-Memorisierung

React bietet drei Haupttools für die Memoisierung, um die Komponentenleistung zu optimieren, indem unnötige erneute Renderings und Neuberechnungen minimiert werden:

1. useMemo – Berechnete Werte merken

• Zweck: Speichert das Ergebnis einer Berechnung zwischen und berechnet es nur neu, wenn sich Abhängigkeiten ändern.

• Verwendung: Verwendung für kostspielige Berechnungen oder abgeleitete Daten, die nur bei bestimmten Abhängigkeiten aktualisiert werden sollten.
  

  const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
  
  

  Nach dem Login kopieren

• Best Practices:

  • Fügen Sie alle innerhalb der Funktion verwendeten Abhängigkeiten in das Abhängigkeitsarray ein.
  • Vermeiden Sie das Erstellen neuer Referenzen (Arrays, Objekte) oder Inline-Funktionen in useMemo.
  • Hinweis: Verwenden Sie useMemo nicht für Funktionen; Es speichert Werte zwischen, keine Funktionsreferenzen.

2. useCallback – Funktionsreferenzen auswendig lernen

• Zweck: Speichert eine Funktionsreferenz im Cache und verhindert so eine Neuerstellung bei jedem Rendern.

• Verwendung: Verwendung für stabile Funktionsreferenzen, insbesondere für Rückrufe (z. B. Event-Handler), die an untergeordnete Komponenten übergeben werden.
  

  const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
  
  

  Nach dem Login kopieren

• Best Practices:

  • Fügen Sie alle innerhalb der Funktion verwendeten Abhängigkeiten in das Abhängigkeitsarray ein, um veraltete Werte zu vermeiden.
  • Vermeiden Sie die Deklaration von Inline-Funktionen innerhalb von useCallback, da dies die Memoisierung unterbrechen kann.
  • Hinweis: Verwenden Sie useCallback nur für Funktionen. Der Missbrauch von useCallback für Werte führt zu ineffizientem Code mit unnötigen Funktionsaufrufen.

3. React.memo – Ganze Komponenten auswendig lernen

• Zweck: Verhindert, dass eine Funktionskomponente erneut gerendert wird, wenn sich ihre Requisiten nicht geändert haben.

• Verwendung: Zur Optimierung untergeordneter Komponenten, die nicht erneut gerendert werden müssen, wenn sich die übergeordnete Komponente ändert.
  

  const MemoizedComponent = React.memo(ChildComponent);
  
  

  Nach dem Login kopieren

• Best Practices:

  • Verwendung bei Komponenten, die stabile Stützen oder Stützen erhalten, die sich selten ändern.
  • Vermeiden Sie häufige Änderungen an Requisiten (wie neue Objekte/Arrays), um die Effektivität von React.memo zu maximieren.
  • Hinweis: Funktioniert gut mit useCallbackmemoized-Funktionen, um stabile Requisiten aufrechtzuerhalten, die an untergeordnete Komponenten übergeben werden.

Wichtige Punkte, die Sie sich merken sollten

• Verwenden Sie useMemo für Werte und useCallback für Funktionen.
  • Die Verwendung von useMemo für Funktionen führt zu einer sofortigen Ausführung und nicht zu einer stabilen Funktionsreferenz.
  • Die Verwendung von useCallback für Werte gibt eine Funktion zurück, was zu ineffizientem Code mit zusätzlichen Funktionsaufrufen führt.
• Memoization-Zusammenfassung:
  • useMemo: Cachet berechnete Werte (Rückgabewerte von Funktionen).
  • useCallback: Zwischenspeichert Funktionsreferenzen (Callbacks).
  • React.memo: Zwischenspeichert gesamte Komponenten basierend auf Requisiten, um ein erneutes Rendern durch übergeordnete Aktualisierungen zu verhindern.
• Selektive Verwendung von Memoisierung: Memoisierung verbessert die Leistung bei korrekter Verwendung, kann jedoch bei übermäßiger oder falscher Verwendung die Komplexität erhöhen.

Das obige ist der detaillierte Inhalt vonSpickzettel zur Reagieren-Memorisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!