React Memo

React.memoist eine Higher-Order-Komponente (HOC), die zur Optimierung der Performance von Funktionskomponenten verwendet wird. Sie verbessert die Performance, indem sie die Render-Ausgabe der Komponente memoisiert und erneutes Rendern überspringt, wenn sich die props der Komponente nicht geändert haben. Das Folgende istReact.memodie detaillierte Einführung und die Verwendungsmethoden.

1. Grundlegende Verwendung

React.memoDie grundlegende Verwendung besteht darin, eine Funktionskomponente als Argument anReact.memozu übergeben, und eine memoisierte Komponente zurückzugeben.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = React.memo((props) => {
  console.log('Rendering MyComponent');
  return <div>{props.text}</div>;
});

const App = () => {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('Hello, world!');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Zähler erhöhen</button>
      <MyComponent text={text} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

In diesem Beispiel, selbst wenncountder State ändert sich,MyComponentwird es nicht neu gerendert, weil seinpropssich nicht geändert hat.

2. Verwenden einer benutzerdefinierten Vergleichsfunktion

Standardmäßig,React.memovergleicht nur die vorherigen und nächstenprops, und wenn es keine Änderung gibt, wird es nicht neu gerendert. Sie können die Logik für das erneute Rendern präziser steuern, indem Sie eine benutzerdefinierte Vergleichsfunktion übergeben.

Signatur der benutzerdefinierten Vergleichsfunktion:

function areEqual(prevProps, nextProps) {
  // 返回 true 表示相等，不需要重新渲染
  // 返回 false 表示不相等，需要重新渲染
}

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = React.memo((props) => {
  console.log('Rendering MyComponent');
  return <div>{props.text}</div>;
}, (prevProps, nextProps) => {
  return prevProps.text === nextProps.text;
});

const App = () => {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('Hello, world!');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Zähler erhöhen</button>
      <MyComponent text={text} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

In diesem Beispiel prüft die benutzerdefinierte Vergleichsfunktiontextob es sich geändert hat. Wenntextes sich nicht geändert hat,MyComponentes wird nicht neu gerendert.

3. Praktische Anwendungsszenarien

React.memoEs eignet sich sehr gut für die folgenden Szenarien:

  • Statische Datenanzeige: die von der Komponente empfangenen Propspropssich selten ändern, aber die Komponente selbst relativ komplex ist und das erneute Rendern kostspielig ist.
  • Leistungsoptimierung: In großen Listen oder Tabellen ist jedes Element eine unabhängige Komponente; die Verwendung vonReact.memokann unnötige erneute Renderings vermeiden.
  • Tiefe Gleichheitsprüfungen vermeiden: Die benutzerdefinierte Vergleichsfunktion kann tiefe Gleichheitsprüfungen vermeiden, insbesondere wennpropseine große Datenmenge enthält.

4. Hinweise

  • Flacher Vergleich: StandardmäßigReact.memoführt einen flachen Vergleich durch, was bedeutet, dass nurpropsdie oberste Ebene verglichen wird. Verschachtelte Objekte erfordern eine benutzerdefinierte Vergleichsfunktion.
  • State und Kontext：React.memokonzentriert sich nur aufpropsÄnderungen. Änderungen am internen Zustand und Kontext der Komponente lösen kein erneutes Rendern aus.

5. MituseMemounduseCallbackder Unterschied

  • React.memo: wird verwendet, um die gesamte Komponente zu memoisieren und das Rendern der Komponente zu optimieren.
  • useMemo: wird verwendet, um Werte oder berechnete Ergebnisse innerhalb von Funktionskomponenten zu memoisieren.
  • useCallback: wird verwendet, um Callback-Funktionen innerhalb von Funktionskomponenten zu memoisieren, um unnötiges erneutes Erstellen zu vermeiden.

Beispiel

import React, { useState, useMemo, useCallback } from 'react';
import ReactDOM from 'react-dom';

const ChildComponent = React.memo(({ onClick, count }) => {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Count: {count}</button>;
});

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const doubledCount = useMemo(() => count * 2, [count]);

  return (
    <div>
      <p>Verdoppelte Anzahl: {doubledCount}</p>
      <ChildComponent onClick={increment} count={count} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

In diesem Beispiel,useCallbackunduseMemowird verwendet, um Funktionen und berechnete Ergebnisse zu optimieren,React.memowird verwendet, um das Rendern von Kindkomponenten zu optimieren.

Zusammenfassung

React.memoist ein leistungsstarkes Werkzeug, das die Leistung von Funktionskomponenten effektiv verbessern und unnötige erneute Renderings vermeiden kann. Durch die Verwendung vonReact.memound benutzerdefinierten Vergleichsfunktionen können Sie die Anwendungsleistung erheblich optimieren, ohne die Anwendungslogik zu beeinträchtigen.

Weitere Erweiterungen