Verabschieden Sie sich von unnötigen erneuten Renderings mit React Memo: Schritt-für-Schritt-Anleitung

React Memo: Steigerung der Reaktionsleistung durch einfaches Auswendiglernen

Einführung

React-Anwendungen arbeiten häufig mit großen Datensätzen und komplexen Komponenten, bei denen unnötiges erneutes Rendern die Leistung erheblich beeinträchtigen kann. Um dieses Problem zu lösen, bietet React React.memo an – ein einfaches, aber leistungsstarkes Tool zur Optimierung von Komponenten und zur Verkürzung der Renderzeiten. In diesem Leitfaden erfahren Sie, wie React Memo funktioniert, warum es nützlich ist und wie Sie es Schritt für Schritt implementieren.

---

Was ist ein Reaktionsmemo?

React.memo ist eine Komponente höherer Ordnung (HOC) in React, die beim Auswendiglernen funktionaler Komponenten hilft. Beim Memoisieren wird die Ausgabe einer Funktion basierend auf ihren Eingaben zwischengespeichert, sodass die Funktion das Ergebnis für dieselben Eingaben nicht neu berechnen muss. React Memo funktioniert ähnlich: Es „merkt“ sich die zuletzt gerenderte Ausgabe einer Komponente und rendert sie nur dann erneut, wenn sich ihre Requisiten ändern.

Warum React Memo?

In React werden Komponenten immer dann neu gerendert, wenn ihre übergeordneten Komponenten neu gerendert werden. Dies kann zu Ineffizienzen führen, wenn die Ausgabe einer Komponente nicht von den Änderungen in ihrer übergeordneten Komponente abhängt. Beispielsweise kann es bei komplexen Benutzeroberflächen mit vielen Komponenten zu Verzögerungen aufgrund übermäßiger Neu-Renderings kommen. Mit React Memo kann dies optimiert werden, indem Komponenten nur bei Bedarf aktualisiert werden.

---

Probleme werden durch Reagieren und Memos gelöst

1. Unnötiges erneutes Rendern

Wenn eine übergeordnete Komponente neu gerendert wird, werden auch ihre untergeordneten Komponenten neu gerendert. Dies kann zu Leistungsengpässen führen, insbesondere wenn Komponenten statische Daten anzeigen oder auf unveränderliche Requisiten angewiesen sind.

2. Verzögerungen oder langsame Leistung in komplexen Benutzeroberflächen

Anwendungen mit tief verschachtelten Komponenten können aufgrund kumulativer Neu-Renderings eine langsame Leistung erleiden. Die Memoisierung mit React Memo verhindert das erneute Rendern von Komponenten, die keine Aktualisierungen erfordern, und verbessert so die Reaktionsfähigkeit der App.

---

So funktioniert React Memo: Schritt-für-Schritt-Beispiel

Lassen Sie uns eine grundlegende Implementierung von React Memo durchgehen. Wir beginnen mit einer einfachen Komponente, die keine Memoisierung verwendet, und sehen, welchen Unterschied das Hinzufügen von React Memo macht.

Schritt 1: Richten Sie eine einfache Zählerkomponente ohne React Memo ein

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Erläuterung

In diesem Beispiel wird die Counter-Komponente jedes Mal neu gerendert, wenn Sie etwas in das Eingabefeld eingeben, auch wenn der Zählwert gleich bleibt. Dies ist ein unnötiges erneutes Rendern, das wir mit React Memo verhindern können.

Schritt 2: Optimierung mit React Memo

Jetzt packen wir die Counter-Komponente mit React.memo ein, um sie zu optimieren.

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Erläuterung

Mit React.memo wird die Counter-Komponente nur dann erneut gerendert, wenn sich ihre Zählstütze ändert. Jetzt löst die Eingabe in das Eingabefeld nicht mehr ein erneutes Rendern von Counter aus, was die Leistung erheblich optimiert.

---

React Memo in Aktion: Ein praktisches Szenario mit Listen

Lassen Sie uns in ein komplexeres Beispiel eintauchen, um die wahren Vorteile von React Memo zu sehen. Angenommen, wir haben eine Liste von Artikeln mit einem „Gefällt mir“-Button neben jedem Artikel. Wir zeigen, wie React Memo übermäßiges erneutes Rendern verhindern kann, wenn einzelne Elemente mit „Gefällt mir“ markiert werden.

Schritt 1: Erstellen Sie die Listenkomponente ohne Memo

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Problem

Wenn Ihnen im obigen Code ein Artikel gefällt, werden alle Artikel erneut gerendert, auch wenn sich nur die „Gefällt mir“-Angaben eines Artikels ändern.

Schritt 2: Artikelkomponente mit React Memo optimieren

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    <div>
      <h2>{item.name}</h2>
      <button onClick={() => onLike(item.id)}>Like</button>
    </div>
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes + 1 } : item
      )
    );
  };

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} item={item} onLike={handleLike} />
      ))}
    </div>
  );
}

export default ItemList;

Ergebnis

Jetzt wird nur das Element, auf das Sie klicken, um es zu mögen, neu gerendert, wodurch die Benutzeroberfläche viel schneller und effizienter wird.

---

Wann sollte React Memo verwendet werden?

React Memo ist in bestimmten Szenarien nützlich, aber die Verwendung überall kann Ihren Code verkomplizieren, ohne einen echten Nutzen zu bringen. Hier sind einige Schlüsselsituationen, in denen es besonders effektiv sein kann:

1. Statische Komponenten: Komponenten, die sich nicht oft ändern, wie Kopf- oder Fußzeilen.
2. Reine funktionale Komponenten: Komponenten, deren Rendering ausschließlich von Requisiten abhängt.
3. Große Komponentenlisten: Listen mit vielen Elementen, die unnötiges erneutes Rendern vermeiden müssen.

---

Mögliche Fallstricke und Best Practices

1. Flache Vergleich: React Memo führt einen flachen Vergleich durch, was bedeutet, dass Änderungen in tief verschachtelten Objekten oder Arrays nicht erkannt werden. Erwägen Sie die Verwendung von useMemo oder useCallback, wenn Sie komplexe Requisiten übergeben.

2. Leistungsüberwachung: Verwenden Sie React DevTools, um zu ermitteln, welche Komponenten tatsächlich von der Memoisierung profitieren. Eine übermäßige Verwendung von React Memo kann zu Codekomplexität mit vernachlässigbaren Leistungssteigerungen führen.

---

Häufig gestellte Fragen (FAQ)

F1: Wie unterscheidet sich React Memo von useMemo und useCallback?

• React Memo optimiert das erneute Rendern von Komponenten basierend auf Requisiten.
• useMemo speichert berechnete Werte innerhalb einer Komponente zwischen.
• useCallback speichert Funktionen zwischen und verhindert so, dass sie bei jedem Rendern neu erstellt werden.

F2: Kann ich React Memo mit Klassenkomponenten verwenden?

Nein, React Memo gilt nur für Funktionskomponenten. Für Klassenkomponenten kann jedoch mit PureComponent ein ähnliches Verhalten erreicht werden.

---

Abschluss

React Memo ist ein wertvolles Tool, um unnötiges erneutes Rendern zu reduzieren und die Leistung der React-Anwendung zu steigern. Indem Sie es gezielt auf reine Funktionskomponenten oder statische UI-Elemente anwenden, können Sie Ihre React-App optimieren, ohne ihre Struktur zu komplizieren. Befolgen Sie diese Schritte, probieren Sie die Beispiele aus und experimentieren Sie weiter, um die besten Memoisierungsstrategien für Ihr Projekt zu finden!

Das obige ist der detaillierte Inhalt vonVerabschieden Sie sich von unnötigen erneuten Renderings mit React Memo: Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!