Einführung

Da moderne Webanwendungen immer komplexer werden, wird die Sicherstellung einer optimalen Leistung immer wichtiger. React, eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, bietet verschiedene Strategien zur Verbesserung der Anwendungsleistung. Unabhängig davon, ob Sie an einem kleinen Projekt oder einer großen Anwendung arbeiten, kann das Verständnis und die Implementierung dieser Optimierungstechniken zu schnelleren Ladezeiten, reibungsloseren Benutzererlebnissen und einer effizienteren Ressourcennutzung führen.

In diesem Beitrag werden wir wesentliche Techniken zur Optimierung von React-Anwendungen untersuchen, von der effizienten Zustandsverwaltung und der Minimierung von erneuten Renderings bis hin zur Nutzung von Code-Splitting und Lazy Loading. Diese Strategien helfen nicht nur bei der Bereitstellung leistungsstarker Anwendungen, sondern auch bei der Aufrechterhaltung der Skalierbarkeit und Reaktionsfähigkeit, wenn Ihre Anwendung wächst. Lassen Sie uns eintauchen und herausfinden, wie Sie das Beste aus Ihren React-Anwendungen herausholen, indem Sie deren Leistung optimieren.

1. React.memo verwenden: Verhindert unnötiges erneutes Rendern

React.memo ist eine Komponente höherer Ordnung, die dazu beitragen kann, unnötige erneute Renderings funktionaler Komponenten zu verhindern. Dabei wird die gerenderte Ausgabe einer Komponente gespeichert und nur dann erneut gerendert, wenn sich ihre Requisiten ändern. Dies kann zu erheblichen Leistungsverbesserungen führen, insbesondere bei Komponenten, die häufig gerendert werden, deren Requisiten sich jedoch nicht oft ändern.

Beispiel

Sehen wir uns ein Beispiel an, in dem wir React.memo verwenden, um unnötiges erneutes Rendern zu vermeiden:

import React, { useState } from 'react'; // A functional component that displays a count const CountDisplay = React.memo(({ count }) => { console.log('CountDisplay rendered'); return 
Count: {count}
; }); const App = () => { const [count, setCount] = useState(0); const [text, setText] = useState(''); return ( 
  setCount(count + 1)}>Increment Count   setText(e.target.value)} placeholder="Type something" /> 
 ); }; export default App;

Erläuterung

• Wenn Sie auf die Schaltfläche „Anzahl erhöhen“ klicken, wird die CountDisplay-Komponente neu gerendert, da sich ihre Zählstütze ändert.
• Wenn Sie etwas in das Eingabefeld eingeben, wird die CountDisplay-Komponente nicht erneut gerendert, da ihre Zählstütze unverändert bleibt, auch wenn die übergeordnete App-Komponente erneut gerendert wird.

2. Verwenden Sie useMemo und useCallback Hooks: Merken Sie sich teure Berechnungen

Reacts useMemo- und useCallback-Hooks werden verwendet, um teure Berechnungen und Funktionen zu speichern und unnötige Neuberechnungen und erneutes Rendern zu verhindern. Diese Hooks können die Leistung in React-Anwendungen erheblich verbessern, insbesondere wenn es um komplexe Berechnungen oder häufig gerenderte Komponenten geht.

Verwenden Sie Memo

useMemo wird verwendet, um einen Wert zu speichern, sodass er nur dann neu berechnet wird, wenn sich eine seiner Abhängigkeiten ändert.

Beispiel

import React, { useState, useMemo } from 'react'; const ExpensiveCalculationComponent = ({ num }) => { const expensiveCalculation = (n) => { console.log('Calculating...'); return n * 2; // Simulate an expensive calculation }; const result = useMemo(() => expensiveCalculation(num), [num]); return 
Result: {result}
; }; const App = () => { const [num, setNum] = useState(1); const [text, setText] = useState(''); return ( 
  setNum(num + 1)}>Increment Number   setText(e.target.value)} placeholder="Type something" /> 
 ); }; export default App;

Erläuterung

• Durch Klicken auf die Schaltfläche „Anzahl erhöhen“ wird die teure Berechnung ausgelöst, und in der Konsole wird „Berechnung...“ angezeigt.
• Das Eintippen in das Eingabefeld löst dank useMemo. nicht die teure Berechnung aus.

useCallback

useCallback wird verwendet, um eine Funktion zu speichern, sodass sie nur dann neu erstellt wird, wenn sich eine ihrer Abhängigkeiten ändert.

Beispiel

import React, { useState, useCallback } from 'react'; const Button = React.memo(({ handleClick, label }) => { console.log(`Rendering button - ${label}`); return {label}; }); const App = () => { const [count, setCount] = useState(0); const [text, setText] = useState(''); const increment = useCallback(() => { setCount((prevCount) => prevCount + 1); }, []); return ( 
  
Count: {count}
  setText(e.target.value)} placeholder="Type something" /> 
 ); }; export default App;

Erklärung

• Durch Klicken auf die Schaltfläche „Anzahl erhöhen“ wird die Inkrementierungsfunktion ausgelöst und die Schaltflächenkomponente wird nicht unnötig neu gerendert.
• Die Eingabe in das Eingabefeld führt dank useCallback nicht dazu, dass die Button-Komponente erneut gerendert wird.

3. Lazy Loading und Code-Splitting: Laden Sie Komponenten dynamisch

Lazy Loading und Code-Splitting sind Techniken, die in React verwendet werden, um die Leistung Ihrer Anwendung zu verbessern, indem Komponenten nur dann geladen werden, wenn sie benötigt werden. Dies kann die anfängliche Ladezeit verkürzen und das allgemeine Benutzererlebnis verbessern.

- Lazy Loading mit React.lazy und Suspense

React bietet eine integrierte Funktion React.lazy, um das verzögerte Laden von Komponenten zu ermöglichen. Es ermöglicht Ihnen, Ihren Code in kleinere Teile aufzuteilen und diese bei Bedarf zu laden.

Beispiel

import React, { Suspense } from 'react'; // Lazy load the component const MyLazyComponent = React.lazy(() => import('./MayLazyComponent')); const App = () => { return ( 
 
Welcome to My App
 {/* Suspense component wraps the lazy loaded component */} Loading...
}>