React.memo zur Leistungsoptimierung in React verstehen

React.memo ist eine Komponente höherer Ordnung (HOC), die dabei hilft, die Leistung von React-Komponenten zu optimieren, indem sie unnötige erneute Renderings verhindert. Es wird zum Speichern funktionaler Komponenten verwendet, was bedeutet, dass React das erneute Rendern der Komponente überspringt, wenn sich ihre Requisiten nicht geändert haben. Dies ist besonders nützlich für die Leistungsoptimierung in großen React-Anwendungen, bei denen ein erneutes Rendern kostspielig sein kann.

So funktioniert React.memo

React.memo führt einen oberflächlichen Vergleich der Requisiten der Komponente durch. Wenn die Requisiten mit denen des vorherigen Renderings identisch sind, überspringt React das Rendern der Komponente und verwendet stattdessen das Ergebnis des vorherigen Renderings. Dies kann die Anzahl der erneuten Renderings erheblich reduzieren und die Leistung verbessern, insbesondere beim Rendern großer Listen oder teurer Komponenten.

Syntax

const MemoizedComponent = React.memo(Component);

Wo:

• Komponente ist die funktionale Komponente, die Sie sich merken möchten.
• MemoizedComponent ist die neue gespeicherte Version der Komponente.

Beispiel: Grundlegende Verwendung von React.memo

Sehen wir uns ein einfaches Beispiel an, wie React.memo verwendet werden kann:

import React, { useState } from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log("Child component re-rendered");
  return <div>Hello, {name}!</div>;
});

function App() {
  const [name, setName] = useState('John');
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent name={name} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

Erläuterung:

• ChildComponent ist in React.memo eingeschlossen. Es wird nur dann neu gerendert, wenn sich die Namensstütze ändert.
• App hat zwei Statuselemente: Name und Anzahl. Durch Klicken auf die Schaltfläche „Anzahl erhöhen“ wird die Namensstütze nicht geändert, sodass die ChildComponent nicht erneut gerendert wird, wenn der Zählstatus aktualisiert wird.
• Wenn Sie auf „Name ändern“ klicken, ändert sich die Namensstütze, wodurch ChildComponent neu gerendert wird.

Ausgabe:

• Wenn Sie auf die Schaltfläche „Anzahl erhöhen“ klicken, wird die untergeordnete Komponente nicht erneut gerendert, aber sie protokolliert „Untergeordnete Komponente erneut gerendert“, wenn sich die Namensstütze ändert.

Benutzerdefinierter Vergleich mit React.memo

Standardmäßig führt React.memo einen oberflächlichen Vergleich von Requisiten durch, Sie können jedoch eine benutzerdefinierte Vergleichsfunktion bereitstellen, wenn Sie mehr Kontrolle darüber benötigen, wie Requisiten verglichen werden.

Die benutzerdefinierte Vergleichsfunktion sollte true zurückgeben, wenn die Komponente nicht erneut gerendert werden soll, und false, wenn dies der Fall sein sollte.

Beispiel: Benutzerdefinierte Vergleichsfunktion

const ChildComponent = React.memo(
  ({ name, age }) => {
    console.log("Child component re-rendered");
    return <div>Hello, {name}, {age}!</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison: only re-render if name changes
    return prevProps.name === nextProps.name;
  }
);

function App() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <ChildComponent name={name} age={age} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
    </div>
  );
}

In diesem Beispiel wird die ChildComponent dank der benutzerdefinierten Vergleichsfunktion nur dann neu gerendert, wenn sich die Namensstütze ändert, selbst wenn sich die Altersstütze ändert.

Wann sollte React.memo verwendet werden?

• Leistungsoptimierung: Wenn Sie funktionale Komponenten haben, die Requisiten erhalten und sich nicht oft ändern, kann React.memo dabei helfen, unnötige Renderings zu vermeiden.
• Listen-Rendering: Für große Listen, bei denen sich nur wenige Elemente ändern, kann React.memo sehr nützlich sein. Wenn Sie beispielsweise eine Liste von Elementen rendern, verhindert das Auswendiglernen jeder Listenelementkomponente, dass unveränderte Elemente erneut gerendert werden.
• Teure Komponenten: Wenn eine Komponente über eine teure Rendering-Logik verfügt (z. B. komplexe Berechnungen oder das Rendern umfangreicher Daten), kann die Verwendung von React.memo die Gesamtleistung verbessern, indem unnötige Neuberechnungen vermieden werden.

Wann Sie React.memo nicht verwenden sollten

• Kleine Komponenten: Bei kleinen Komponenten mit wenigen Requisiten kann die Verwendung von React.memo den Mehraufwand erhöhen, ohne dass es zu einer nennenswerten Leistungssteigerung kommt.
• Requisiten häufig ändern: Wenn eine Komponente Requisiten erhält, die sich häufig ändern, bietet React.memo möglicherweise keinen großen Nutzen, da die Komponente ohnehin neu gerendert wird.
• Komplexe Vergleichslogik: Benutzerdefinierte Vergleichslogik kann teurer sein, als nur zuzulassen, dass die Komponente normal neu gerendert wird. Verwenden Sie es nur bei Bedarf.

Abschluss

React.memo ist ein einfaches, aber leistungsstarkes Optimierungstool in React, um unnötiges erneutes Rendern funktionaler Komponenten zu verhindern. Durch das Auswendiglernen von Komponenten und die Verwendung eines flachen Requisitenvergleichs (oder einer benutzerdefinierten Vergleichsfunktion) kann React das Rendern dieser Komponenten überspringen, wenn sich ihre Requisiten nicht geändert haben, was zu Leistungsverbesserungen führt, insbesondere bei großen oder komplexen Anwendungen.

Das obige ist der detaillierte Inhalt vonReact.memo zur Leistungsoptimierung in React verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!