Einführung

Ich schreibe jetzt seit mehr als 3 Jahren React-Code. Eine Sache, auf die ich mich jedoch zunächst nicht konzentriert habe, war die Optimierung der React-Leistung. Meistens häufen sich die technischen Schulden an und es wird schwierig, die Leistung zu optimieren.

Es ist ziemlich schwierig, sich von Anfang an auf die Optimierung zu konzentrieren, aber Sie können von Zeit zu Zeit Optimierungen einplanen, um große technische Schulden zu vermeiden.

Wir werden uns einige der Optimierungstechniken für React ansehen. Dies kann implementiert werden, während Sie Code schreiben. Es geht darum, diese Methode einer anderen Methode vorzuziehen.

Also, fangen wir an.

1. Optimierung großer Listen

Rendering-Liste ist recht verbreitet, da es in React Komponenten gibt. Das Rendern einer großen Liste ist eine Herausforderung, da es zu langsamem Rendern und Speicherverbrauch führen kann. Virtualisierung ist der beste Weg, solche Probleme zu lösen. Es werden einfach nur sichtbare Listen gerendert und andere Elemente werden bei Bedarf gerendert.

React Window und React Virtualized sind beliebte Bibliotheken für die Virtualisierungsliste. Sie rendern nur die im Ansichtsfenster sichtbaren Elemente, wodurch die Anzahl der gleichzeitig gerenderten DOM-Knoten erheblich reduziert wird.

Hier ist ein Beispiel mit React Window:

import { FixedSizeList as List } from 'react-window'; const MyList = ({ items }) => (  {({ index, style }) => ( 
 {items[index]} 
 )}  );

2. Verwenden Sie Memo

useMemo ist ein React-Hook, der sich das Ergebnis einer Berechnung merkt. Daher ist eine Mehrfachverarbeitung der Berechnung nicht möglich, sofern sich die Abhängigkeiten nicht ändern. Dies kann zur Optimierung der Leistung in Szenarien nützlich sein, in denen eine Funktion oder Berechnung teuer ist und nicht bei jedem Rendern erneut ausgeführt werden sollte.

Syntax des useMemo ist:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Wie Sie sehen können, benötigt useMemo zwei Argumente:

• Eine Funktion, die einen Wert zurückgibt, damit dieser gespeichert werden kann.
• Eine Reihe von Abhängigkeiten, die bestimmen, wann der gespeicherte Wert neu berechnet werden soll.

Hier ist ein AnwendungsbeispielMemo:

import React, { useState, useMemo } from 'react'; const ExpensiveComponent = ({ a, b }) => { const computeExpensiveValue = (a, b) => { console.log('Computing expensive value...'); return a + b; }; const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); return (
         

          
Computed Value: {memoizedValue}
         
); }; const ParentComponent = () => { const [a, setA] = useState(1); const [b, setB] = useState(2); const [count, setCount] = useState(0); return (
         

          
          setCount(count + 1)}>Increment Count
         
); };

3. Code-Splitting

Bei einem herkömmlichen Setup werden alle Komponenten Ihrer Anwendung in einer einzigen Datei gebündelt. Code-Splitting ist eine Optimierungstechnik zur Aufteilung Ihrer Anwendung in kleinere Teile. Es reduziert die Ladezeit der Anwendung, da Sie kleinere Komponenten laden, und vermeidet andere Komponenten, die nicht benötigt werden.

Hier ist ein Beispiel für Code-Splitting:

import React, { useState } from 'react'; function App() { const [component, setComponent] = useState(null); const loadComponent = async () => { const { default: LoadedComponent } = await import('./MyComponent'); setComponent(); }; return ( 
 
Code Splitting Example
 Load Component {component} 
 ); } export default App;

4. Reagieren Sie auf Lazy Load

React.Lazy ist eine wichtige Methode zur Optimierung des Ladens von Komponenten. Es ermöglicht Ihnen das verzögerte Laden von Komponenten. Dies bedeutet, dass diese Komponente nur bei Bedarf geladen wird. Damit können Sie Ihre Anwendung in kleinere Komponenten aufteilen und diese bei Bedarf laden.

React.lazy() wird verwendet, um eine Komponente dynamisch zu importieren. Wenn die Komponente benötigt wird, wird sie asynchron geladen und bis dahin kann eine Fallback-Benutzeroberfläche (wie ein Ladespinner) angezeigt werden.

Hier ist ein Beispiel für Lazy Load:

import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./MyComponent')); const App = () => { return ( 
 
My App
 Loading...
}>