„useCallback“ vs. „useMemo“ Hooks

Steigerung der Reaktionsleistung: useCallback vs. useMemo Hooks

Die useCallback- und useMemo-Hooks von React sind entscheidend für die Optimierung der Leistung Ihrer Anwendungen. Wenn Sie wissen, wann und wie Sie sie verwenden, können Sie sich unnötiges erneutes Rendern ersparen und sicherstellen, dass Ihre App reibungslos läuft. In diesem Artikel tauchen wir in reale Beispiele für die effektive Nutzung von useCallback und useMemo ein.

Wann sollte useCallback verwendet werden?

Der useCallback-Hook gibt eine gespeicherte Version der Callback-Funktion zurück, was bedeutet, dass er die Funktion nur dann neu erstellt, wenn sich eine ihrer Abhängigkeiten ändert. Dies ist besonders nützlich, wenn Funktionen als Requisiten an untergeordnete Komponenten übergeben werden, um zu verhindern, dass sie unnötig neu gerendert werden.

Echtzeitbeispiel: Verhindern unnötiger erneuter Renderings

Angenommen, Sie haben eine übergeordnete Komponente, die eine Funktion an eine untergeordnete Komponente übergibt. Ohne useCallback würde die untergeordnete Komponente jedes Mal neu gerendert, wenn die übergeordnete Komponente gerendert wird, selbst wenn sich die Funktionslogik nicht geändert hat.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
};

export default ParentComponent;

Im obigen Beispiel wird handleIncrement mit useCallback gespeichert. Die ChildComponent wird nur dann erneut gerendert, wenn sich die Anzahl ändert, wodurch unnötige erneute Renderings verhindert und die Leistung verbessert werden.

Wann sollte useMemo verwendet werden?

Der useMemo-Hook wird verwendet, um das Ergebnis einer Funktion zu speichern und das zwischengespeicherte Ergebnis nur dann neu zu berechnen, wenn sich eine ihrer Abhängigkeiten ändert. Dies ist nützlich, um die Leistung in Situationen zu optimieren, in denen eine Funktion eine teure Berechnung durchführt.

Echtzeitbeispiel: Optimierung teurer Berechnungen

Angenommen, Sie haben eine Komponente, die einen rechenintensiven Vorgang ausführt, wie etwa das Filtern einer großen Liste.

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filter items"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ExpensiveComponent;

In diesem Beispiel wird useMemo verwendet, um das Ergebnis der Filterung des Elementarrays zwischenzuspeichern. Auf diese Weise wird der teure Filtervorgang nur dann neu berechnet, wenn sich Elemente oder Filter ändern, wodurch unnötige Berechnungen vermieden werden.

Richtlinien für die Verwendung von useCallback und useMemo

• Verwenden Sie useCallback, wenn Sie Funktionen an untergeordnete Komponenten übergeben, um unnötiges erneutes Rendern zu vermeiden.
• Verwenden Sie useMemo für teure Berechnungen, die nicht bei jedem Rendern neu berechnet werden müssen.
• Vermeiden Sie übermäßigen Gebrauch. Memoisierung erhöht die Komplexität und kann manchmal dazu führen, dass Code schwerer zu lesen ist. Verwenden Sie sie nur, wenn Sie ein Leistungsproblem feststellen.
• Denken Sie an das Abhängigkeits-Array. Geben Sie Abhängigkeiten immer genau an; Andernfalls kann es zu Fehlern oder unerwartetem Verhalten kommen.

Abschluss

Die useCallback- und useMemo-Hooks von React sind leistungsstarke Tools zur Optimierung der Komponentenleistung, indem unnötige erneute Renderings und teure Berechnungen vermieden werden. Durch die sorgfältige Anwendung dieser Hooks können Sie sicherstellen, dass Ihre React-Anwendung effizient läuft.

Das obige ist der detaillierte Inhalt von„useCallback“ vs. „useMemo“ Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!