Optimierung des Re-Renderings in React: Best Practices

Eine der Hauptursachen für Leistungsengpässe in React, insbesondere in großen Apps, ist das erneute Rendern. Der virtuelle DOM-Mechanismus von React aktualisiert das DOM effektiv, aber unnötiges erneutes Rendern kann dennoch zu Leistungsproblemen führen. Das erneute Rendern kann optimiert werden, um sicherzustellen, dass nur die Komponenten neu gerendert werden, die es erfordern, was die Leistung und Reaktionsfähigkeit der Anwendung verbessert.

In diesem Beitrag werden die Best Practices zur Reduzierung sinnloser erneuter Renderings in React-Apps besprochen, zusammen mit einigen hilfreichen Tipps und Methoden, die Ihnen helfen, die Effizienz Ihrer React-Komponenten zu maximieren.

Re-Rendering in React verstehen

Der Rendering-Prozess von React dreht sich um seinen Komponentenbaum. Wenn sich der Status oder die Requisiten einer Komponente ändern, rendert React diese Komponente und ihre untergeordneten Komponenten neu. Wenn dies jedoch nicht richtig gehandhabt wird, kann dies zu unnötigen erneuten Renderings führen, wobei auch Komponenten, die keine wirklichen Änderungen erfahren haben, erneut gerendert werden, was Ressourcen verschwendet.

Häufige Ursachen für unnötiges erneutes Rendern

Requisiten oder Zustandsänderungen, die sich nicht auf die Ausgabe der Komponente auswirken.
Übergeordnete Komponenten werden erneut gerendert, was dazu führt, dass untergeordnete Komponenten erneut gerendert werden, auch wenn sich ihre Requisiten nicht geändert haben.
Anonyme Funktionen oder Objektverweise werden bei jedem Rendern neu erstellt.

Schlüsseltechniken zur Optimierung des Re-Renderings in React

1. Verwenden Sie React.memo für Funktionskomponenten

React.memo ist eine Komponente höherer Ordnung (HOC), die dazu beiträgt, unnötige erneute Renderings in Funktionskomponenten zu verhindern, indem sie das Ergebnis speichert. Wenn sich die Requisiten einer Komponente nicht geändert haben, verhindert React.memo, dass sie erneut gerendert wird.

const MyComponent = React.memo(({ data }) => {
  console.log('Component rendered');
  return <div>{data}</div>;
});

Mit dieser Optimierung wird MyComponent nur dann neu gerendert, wenn sich seine Datenstütze ändert, wodurch die Leistung verbessert wird.

2. Optimieren Sie erneute Renderings mit useCallback und useMemo

?? useCallback: Wird verwendet, um Funktionen zu speichern, damit sie nicht bei jedem Rendern neu erstellt werden. Dies ist nützlich, wenn Funktionen an untergeordnete Komponenten übergeben werden, die von bestimmten Werten abhängen.

const handleClick = useCallback(() => {
  // handle button click
}, []);

?? useMemo: Wird verwendet, um teure Berechnungen oder abgeleitete Daten zu speichern, um eine Neuberechnung bei jedem Rendern zu verhindern.

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(input);
}, [input]);

Diese Hooks stellen sicher, dass die Funktion oder der Wert nur dann neu berechnet wird, wenn sich die Abhängigkeiten ändern, wodurch unnötige Renderings reduziert werden.

3. Vermeiden Sie Inline-Funktionen und Objekterstellung in JSX

Inline-Funktionen oder Objekte, die in JSX erstellt wurden, sind eine häufige Quelle für erneutes Rendern. Da jedes Mal, wenn die Komponente gerendert wird, neue Funktions- oder Objektverweise erstellt werden, löst dies unnötige erneute Renderings in untergeordneten Komponenten aus.

// Avoid this pattern
<MyChildComponent onClick={() => doSomething()} />

// Instead, define the function outside the JSX
const handleClick = () => doSomething();
<MyChildComponent onClick={handleClick} />

Indem Sie die Erstellung von Inline-Funktionen oder -Objekten in JSX vermeiden, tragen Sie dazu bei, dass untergeordnete Komponenten nicht unnötig neu gerendert werden.

4. Teilen Sie große Komponenten in kleinere Komponenten auf

Eine weitere Technik, um unnötiges erneutes Rendern zu vermeiden, besteht darin, große Komponenten in kleinere, fokussiertere Komponenten zu zerlegen. Dadurch kann React detailliertere Aktualisierungen durchführen und verhindert das erneute Rendern ganzer Komponenten, wenn sich nur ein Teil der Komponente geändert hat.

Wenn Sie beispielsweise eine Komponente haben, die ein Formular und eine Liste rendert, können Sie diese in zwei separate Komponenten aufteilen. Auf diese Weise löst die Aktualisierung des Formulars kein erneutes Rendern der Liste aus und umgekehrt.

function ParentComponent() {
  return (
    <>
      <FormComponent />
      <ListComponent />
    </>
  );
}

5. Verwenden Sie den Schlüssel Prop richtig

Beim Rendern von Listen verwendet React die Schlüsselstütze, um Elemente zu identifizieren. Eine falsche Verwendung der Schlüsselstütze kann dazu führen, dass React Komponenten falsch aktualisiert oder neu rendert.

Stellen Sie sicher, dass Sie für jedes Element in einer Liste einen eindeutigen und stabilen Schlüssel verwenden:

const items = ['apple', 'banana', 'orange'];
items.map((item) => <li key={item}>{item}</li>);

Verwenden Sie den Index nicht als Schlüssel, wenn Elemente neu angeordnet oder geändert werden können, da dies zu unerwarteten erneuten Renderings oder fehlerhaften Renderings führen kann.

6. Verwenden Sie ShouldComponentUpdate und PureComponent in Klassenkomponenten

Für Klassenkomponenten ist ShouldComponentUpdate eine Lebenszyklusmethode, mit der Sie steuern können, ob eine Komponente basierend auf Änderungen in Requisiten oder Status neu gerendert werden soll.

Alternativ können Sie PureComponent verwenden, das ShouldComponentUpdate automatisch mit einem flachen Vergleich von Requisiten und Status implementiert.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}

PureComponent ist eine einfachere Alternative zu ShouldComponentUpdate und hilft, unnötige erneute Renderings zu vermeiden, indem vorherige und aktuelle Requisiten und Zustände verglichen werden.

7. Optimieren Sie die Kontext-API-Nutzung

Achten Sie bei der Verwendung der Kontext-API von React auf eine Überbeanspruchung, da dies zu unnötigen erneuten Renderings führen kann, wenn jeder Verbraucher bei einer Änderung des Kontextwerts erneut rendert. Um dies zu vermeiden:

Break down context providers into smaller ones, so only the necessary part of the state triggers updates.
Memoize values passed to the context provider using useMemo to avoid unnecessary re-renders.

const value = useMemo(() => ({ state, updateState }), [state]);

return (
  <MyContext.Provider value={value}>
    {children}
  </MyContext.Provider>
);

8. Lazy Load Components

For performance improvements, especially in large applications, you can lazy load components that are not immediately needed. This can reduce the initial rendering time and the load on the main thread.

React’s React.lazy and Suspense can help in lazy-loading components:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

By lazy-loading components, you delay their rendering until they are actually needed, which reduces unnecessary renders and improves the user experience.

Conclusion

Maintaining performance in React apps requires optimizing re-rendering, especially as the application grows. Avoid needless re-renders by employing strategies like using React.memo, useCallback, useMemo, and breaking up big components into smaller ones. By putting these tactics to good use, you can make sure that your React application stays light-weight, responsive, and simple to update.

Das obige ist der detaillierte Inhalt vonOptimierung des Re-Renderings in React: Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!