Optimieren der Leistung mit Reacts useMemo Hook: Teure Berechnungen auswendig lernen

Memo-Hook in React verwenden

Der useMemo-Hook ist ein integrierter React-Hook, der dabei hilft, die Leistung Ihrer Anwendung zu optimieren, indem er teure Berechnungen speichert. Dadurch wird sichergestellt, dass bestimmte Berechnungen nur dann erneut ausgeführt werden, wenn sich ihre Abhängigkeiten ändern, und nicht bei jedem Rendern. Dies kann besonders nützlich sein, um unnötige Neuberechnungen von Werten zu verhindern, wenn die Komponente erneut gerendert wird.

---

Was ist useMemo?

useMemo wird verwendet, um das Ergebnis eines teuren Funktionsaufrufs zu speichern und es nur dann neu zu berechnen, wenn sich eine seiner Abhängigkeiten geändert hat. Dies kann die Leistung verbessern, indem kostspielige Neuberechnungen bei jedem Rendern vermieden werden.

---

Syntax von useMemo

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• expensiveFunction(param1, param2): Die Funktion, die eine teure Berechnung durchführt.
• memoizedValue: Das Ergebnis der teueren Funktion, das nur dann neu berechnet wird, wenn sich die Abhängigkeiten ändern.
• [param1, param2]: Das Abhängigkeitsarray. Der gespeicherte Wert wird nur dann neu berechnet, wenn sich einer dieser Werte ändert.

---

Wie useMemo funktioniert

1. Memoisierung: Der useMemo-Hook speichert das Ergebnis der Berechnung und gibt das gespeicherte Ergebnis zurück, wenn sich die Abhängigkeiten seit dem letzten Rendern nicht geändert haben.
2. Neuberechnung: Wenn sich eine der Abhängigkeiten ändert, wird die Berechnung erneut ausgeführt und das neue Ergebnis wird zurückgegeben.

---

AnwendungsbeispielMemo Hook

Betrachten wir ein einfaches Beispiel mit einer langsamen Berechnung:

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2 id="Expensive-Calculation-memoizedValue">Expensive Calculation: {memoizedValue}</h2>
      <button onclick="{()"> setCount(count + 1)}>Increment Count</button>
      <button onclick="{()"> setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

• Erklärung:

  • useMemo wird verwendet, um das Ergebnis von berechneExpensiveValue(Anzahl) zu speichern.
  • Die Funktion berechneExpensiveValue wird nur erneut ausgeführt, wenn sich die Anzahl ändert. Wenn sich der Umschaltstatus ändert, wird der gespeicherte Wert nicht neu berechnet, da Umschalten nicht Teil des Abhängigkeitsarrays ist.

• Warum hier useMemo verwenden?

  • Ohne useMemo würde die teure Funktion berechneExpensiveValue bei jedem Rendern aufgerufen, auch wenn sich der Umschaltstatus ändert, und hat keinen Einfluss auf die Berechnung. Durch den Einsatz von useMemo wird sichergestellt, dass die aufwendige Berechnung nur bei Bedarf durchgeführt wird.

---

Wann sollte useMemo verwendet werden?

Sie sollten useMemo verwenden, wenn:

1. Teure Berechnungen: Wenn Sie Funktionen oder Operationen haben, deren Ausführung teuer ist, und Sie eine Neuberechnung vermeiden möchten, es sei denn, dies ist unbedingt erforderlich (z. B. Sortieren eines großen Arrays oder komplexe Berechnungen).

2. Unnötiges erneutes Rendern vermeiden: Das Auswendiglernen von Werten, die an untergeordnete Komponenten übergeben werden, kann unnötige erneute Renderings der untergeordneten Komponente verhindern. Wenn sich der gespeicherte Wert nicht ändert, kann React das Rendern der untergeordneten Komponente überspringen.

3. Leistung optimieren: Wenn eine bestimmte Logik Berechnungen umfasst, die nur von bestimmten Requisiten oder Zuständen abhängen, kann useMemo sicherstellen, dass die Funktion nur ausgeführt wird, wenn sich ihre Abhängigkeiten ändern, und so die Leistung optimieren.

---

Häufige Anwendungsfälle für useMemo

1. Teure Berechnungen

Stellen Sie sich zum Beispiel vor, Sie rendern eine Liste von Elementen, die sortiert oder gefiltert werden müssen, und dieser Vorgang ist teuer.

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• Erklärung: Hier wird der Filtervorgang nur ausgeführt, wenn sich das Datenarray ändert, wodurch unnötige erneute Renderings oder Berechnungen vermieden werden, wenn sich andere Statuswerte ändern.

1. Requisiten für untergeordnete Komponenten auswendig lernen

Wenn Sie eine untergeordnete Komponente haben, die eine Requisite akzeptiert, die aus einer aufwendigen Berechnung resultiert, können Sie sich die Berechnung merken und das Ergebnis als Requisite übergeben.

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2 id="Expensive-Calculation-memoizedValue">Expensive Calculation: {memoizedValue}</h2>
      <button onclick="{()"> setCount(count + 1)}>Increment Count</button>
      <button onclick="{()"> setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

1. Neuberechnung bei unnötigen Renderings verhindern

Wenn Ihre Komponente mehrere Statuswerte hat, aber nur einer eine aufwendige Berechnung beeinflusst, können Sie useMemo verwenden, um eine Neuberechnung dieses Werts zu vermeiden, es sei denn, sein relevanter Status hat sich geändert.

---

Unterschied zwischen useMemo und useCallback

Während sowohl useMemo als auch useCallback zum Auswendiglernen verwendet werden, unterscheiden sich ihre Zwecke:

• useMemo wird verwendet, um das Ergebnis einer teuren Berechnung oder eines Funktionsaufrufs zu speichern.
• useCallback wird verwendet, um sich die eigentliche Funktion selbst zu merken, um zu verhindern, dass die Funktion bei jedem Rendern neu erstellt wird.

Haken Zweck Beispielverwendung

Hook	Purpose	Example Usage
useMemo	Memoizes the result of a function call or calculation	Memoizing a computed value
useCallback	Memoizes the function itself	Preventing the creation of a new function on each render

useMemo Speichert das Ergebnis eines Funktionsaufrufs oder einer Berechnung Einen berechneten Wert auswendig lernen useCallback Merkt sich die Funktion selbst Verhindert die Erstellung einer neuen Funktion bei jedem Rendern

---

Leistungsüberlegungen

• Vermeiden Sie die übermäßige Verwendung von useMemo: Während useMemo die Leistung optimieren kann, ist es mit eigenen Kosten verbunden, da React die Abhängigkeiten und die gespeicherten Werte im Auge behalten muss. In einigen Fällen führt die Verwendung von useMemo möglicherweise nicht zu einer spürbaren Leistungssteigerung, insbesondere bei einfachen Berechnungen.
• Benchmarking: Es ist wichtig, Ihre Komponenten vor und nach der Verwendung von useMemo zu vergleichen, um sicherzustellen, dass die Leistung in Ihrem speziellen Fall tatsächlich verbessert wird.

---

NutzungsbeispielMemo mit Sortierung

Hier ist ein Beispiel für die Verwendung von useMemo zum Merken einer sortierten Liste:

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• Erklärung:
  • In diesem Beispiel wird sortedItems mit useMemo gespeichert. Der Sortiervorgang wird nur dann neu berechnet, wenn sich entweder das Elementarray oder der sortOrder-Status ändert.
  • Ohne useMemo würde die Sortierung bei jedem Rendern erfolgen, auch wenn weder items noch sortOrder geändert würden.

---

Zusammenfassung der VerwendungMemo Hook

• useMemo wird verwendet, um teure Berechnungen zu speichern und sie nur dann neu zu berechnen, wenn sich die Abhängigkeiten ändern.
• Es kann die Leistung erheblich verbessern, indem unnötige Neuberechnungen vermieden werden.
• useMemo sollte für Berechnungen oder Berechnungen verwendet werden, die teuer sind und nur bei Bedarf neu berechnet werden sollten.

---

Fazit

Der useMemo-Hook ist ein wesentliches Werkzeug zur Optimierung der Leistung in React-Anwendungen. Dadurch wird sichergestellt, dass aufwendige Berechnungen nur bei Bedarf durchgeführt werden, wodurch Ihre Komponenten effizienter werden. Es sollte jedoch mit Bedacht verwendet werden, da eine übermäßige Verwendung zu unnötiger Komplexität und potenziellen Leistungseinbußen führen kann.

---

Das obige ist der detaillierte Inhalt vonOptimieren der Leistung mit Reacts useMemo Hook: Teure Berechnungen auswendig lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!