Das useMemo von React verstehen: Was es tut, wann es verwendet wird und Best Practices

React ist eine leistungsstarke Bibliothek zum Erstellen von Benutzeroberflächen. Wenn Ihre Anwendung jedoch wächst, stellen Sie möglicherweise fest, dass die Leistung manchmal zu einem Problem werden kann. Hier kommen React-Hooks wie useMemo ins Spiel. In diesem Artikel gehen wir näher darauf ein, was useMemo macht, wann es nützlich ist und welche Best Practices für die Verwendung gelten. Wir gehen auch auf einige häufige Fallstricke ein, die es zu vermeiden gilt.

Was ist useMemo?

useMemo ist ein React-Hook, mit dem Sie sich das Ergebnis einer Berechnung merken können. Vereinfacht ausgedrückt merkt es sich das Ergebnis einer Funktion und berechnet es nur dann neu, wenn sich ihre Abhängigkeiten ändern. Dies kann unnötige Berechnungen verhindern und die Leistung verbessern.

Hier ist ein einfaches Beispiel:

import React, { useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <div>The result is {result}</div>;
}

In diesem Beispiel wird die Funktion in useMemo nur ausgeführt, wenn sich num ändert. Wenn num gleich bleibt, überspringt React die Berechnung und verwendet das zuvor gespeicherte Ergebnis.

Warum useMemo verwenden?

Der Hauptgrund für die Verwendung von useMemo ist die Optimierung der Leistung. In React werden Komponenten jedes Mal neu gerendert, wenn sich ihr Zustand oder ihre Requisiten ändern. Dies kann dazu führen, dass teure Berechnungen häufiger als nötig ausgeführt werden, insbesondere wenn die Berechnung komplex ist oder der Komponentenbaum groß ist.

Hier sind einige Szenarien, in denen useMemo besonders nützlich ist:

1. Teure Berechnungen:

Stellen Sie sich vor, Sie haben eine Komponente, die eine umfangreiche Berechnung durchführt, beispielsweise das Filtern eines großen Datensatzes. Ohne useMemo würde diese Berechnung bei jedem Rendern ausgeführt, was Ihre Anwendung verlangsamen könnte.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ numbers }) {
  // Expensive calculation: filtering even numbers
  const evenNumbers = useMemo(() => {
    console.log('Filtering even numbers...');
    return numbers.filter(num => num % 2 === 0);
  }, [numbers]);

  return (
    <div>
      <h2>Even Numbers</h2>
      <ul>
        {evenNumbers.map((num) => (
          <li key={num}>{num}</li>
        ))}
      </ul>
    </div>
  );
}

// Usage
const numbersArray = Array.from({ length: 100000 }, (_, i) => i + 1);
export default function App() {
  return <ExpensiveCalculationComponent numbers={numbersArray} />;
}

In diesem Beispiel ist der Filtervorgang rechenintensiv. Durch das Einschließen in useMemo wird es nur ausgeführt, wenn sich das Zahlenarray ändert, und nicht bei jedem Rendern.

2. Vermeiden Sie die Neuerstellung von Objekten oder Arrays

Das Übergeben eines neuen Arrays oder Objekts als Requisite an eine untergeordnete Komponente bei jedem Rendern kann zu unnötigen erneuten Rendern führen, selbst wenn sich der Inhalt nicht geändert hat. useMemo kann verwendet werden, um das Array oder Objekt zu speichern.

import React, { useMemo } from 'react';

function ChildComponent({ items }) {
  console.log('Child component re-rendered');
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default function ParentComponent() {
  const items = useMemo(() => ['apple', 'banana', 'cherry'], []);

  return (
    <div>
      <h2>Fruit List</h2>
      <ChildComponent items={items} />
    </div>
  );
}

Hier wird das Items-Array mit useMemo gespeichert, um sicherzustellen, dass die ChildComponent nur bei Bedarf neu gerendert wird. Ohne useMemo würde bei jedem Rendern ein neues Array erstellt, was zu unnötigen Neu-Renderings der untergeordneten Komponente führen würde.

3. Optimierung großer Komponentenbäume

Bei der Arbeit mit einem großen Komponentenbaum kann die Verwendung von useMemo dazu beitragen, unnötige erneute Renderings zu reduzieren, insbesondere bei teuren Vorgängen innerhalb tief verschachtelter Komponenten.

import React, { useMemo } from 'react';

function LargeComponentTree({ data }) {
  const processedData = useMemo(() => {
    console.log('Processing data for large component tree...');
    return data.map(item => ({ ...item, processed: true }));
  }, [data]);

  return (
    <div>
      <h2>Processed Data</h2>
      {processedData.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}

// Usage
const largeDataSet = Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` }));
export default function App() {
  return <LargeComponentTree data={largeDataSet} />;
}

In diesem Beispiel wird useMemo verwendet, um einen großen Datensatz zu verarbeiten, bevor er in einer Komponente gerendert wird. Durch das Speichern der verarbeiteten Daten berechnet die Komponente die Daten nur dann neu, wenn sich die ursprüngliche Datenstütze ändert, wodurch unnötige Neuverarbeitung vermieden und die Leistung gesteigert wird.

Best Practices für useMemo

Obwohl useMemo ein leistungsstarkes Tool ist, ist es wichtig, es richtig zu verwenden. Hier sind einige Best Practices:

1. Verwenden Sie es zur Leistungsoptimierung: Die teure Berechnung ist ein gutes Beispiel dafür, wann useMemo verwendet werden sollte. Es führt eine möglicherweise kostspielige Operation durch (Summieren eines Arrays und Multiplizieren des Ergebnisses), die von den Zahlen und Multiplikatorstatusvariablen abhängt.

const expensiveCalculation = useMemo(() => {
  console.log('Calculating sum...');
  return numbers.reduce((acc, num) => acc + num, 0) * multiplier;
}, [numbers, multiplier]);

Diese Berechnung wird nur dann erneut ausgeführt, wenn sich Zahlen oder Multiplikatoren ändern, wodurch möglicherweise unnötige Neuberechnungen bei anderen erneuten Renderings eingespart werden.

1. Behalten Sie die Genauigkeit der Abhängigkeiten bei: Beachten Sie, dass der useMemo-Hook für teuere Berechnungen sowohl Zahlen als auch Multiplikatoren in sein Abhängigkeitsarray einschließt. Dadurch wird sichergestellt, dass die Berechnung immer dann erneut ausgeführt wird, wenn sich einer dieser Werte ändert.

}, [numbers, multiplier]);  // Correct dependencies

Wenn wir den Multiplikator in den Abhängigkeiten weggelassen hätten, würde die Berechnung nicht aktualisiert, wenn sich der Multiplikator ändert, was zu falschen Ergebnissen führen würde.

1. Verwenden Sie useMemo nicht zu häufig: Das simpleValue-Beispiel zeigt eine unnötige Verwendung von useMemo:

const simpleValue = useMemo(() => {
  return 42;  // This is not a complex calculation
}, []);  // Empty dependencies array

Dieses Auswendiglernen ist unnötig, da der Wert konstant und die Berechnung trivial ist. Es erhöht die Komplexität ohne Leistungsvorteil.

1. Verstehen Sie, wann Sie es nicht verwenden sollten: Die handleClick-Funktion ist ein gutes Beispiel dafür, wann useMemo nicht verwendet werden sollte:

const handleClick = () => {
  console.log('Button clicked');
};

Diese Funktion ist einfach und erfordert keine aufwendigen Berechnungen. Das Auswendiglernen würde den Code unnötig komplexer machen, ohne wesentliche Leistungsverbesserungen zu erzielen.

Indem Sie diese Best Practices befolgen, können Sie useMemo effektiv zur Optimierung Ihrer React-Komponenten nutzen, ohne Ihren Code zu komplizieren oder potenzielle Fehler durch falsches Abhängigkeitsmanagement einzuführen.

Häufige Fallstricke, die es zu vermeiden gilt

Obwohl useMemo ein großartiges Tool sein kann, gibt es einige häufige Fehler, auf die Sie achten sollten:

1. Abhängigkeiten ignorieren: Wenn Sie vergessen, eine Abhängigkeit in das Array aufzunehmen, kann der gespeicherte Wert veraltet sein, was zu Fehlern führt. Überprüfen Sie immer, ob alle in der gespeicherten Funktion verwendeten Variablen im Abhängigkeitsarray enthalten sind.

2. useMemo Everywhere verwenden: Nicht jede Funktion oder jeder Wert muss gespeichert werden. Wenn Ihr Code keine Leistungsprobleme aufweist, wird das Hinzufügen von useMemo die Dinge nicht verbessern. Tatsächlich kann es aufgrund des Mehraufwands für das Auswendiglernen zu einer leichten Verlangsamung kommen.

3. Missverständnis des erneuten Renderns: useMemo optimiert nur die gespeicherte Berechnung, nicht den gesamten Renderprozess der Komponente. Wenn die Komponente immer noch neue Requisiten oder einen neuen Status erhält, wird sie erneut gerendert, auch wenn sich der gespeicherte Wert nicht ändert.

Abschluss

useMemo ist ein leistungsstarker Haken zur Optimierung der Leistung in React-Anwendungen, sollte jedoch mit Bedacht eingesetzt werden. Konzentrieren Sie sich darauf, es dort einzusetzen, wo es echte Leistungsengpässe gibt, und stellen Sie immer sicher, dass Ihre Abhängigkeiten korrekt sind. Indem Sie diese Best Practices befolgen, können Sie häufige Fallstricke vermeiden und useMemo in Ihren Projekten optimal nutzen.

Das obige ist der detaillierte Inhalt vonDas useMemo von React verstehen: Was es tut, wann es verwendet wird und Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!