Optimieren von Reaktionsanwendungen für maximale Leistung

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-Listen sind 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 }) => (
      <List
        height={500} // Height of the container
        itemCount={items.length} // Total number of items
        itemSize={35} // Height of each item
        width={300} // Width of the container
      >
        {({ index, style }) => (
          <div style={style}>
            {items[index]}
          </div>
        )}
      </List>
    );

---

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 er 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 verkürzt 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(<LoadedComponent />);
      };

      return (
        <div>
          <h1>Code Splitting Example</h1>
          <button onClick={loadComponent}>Load Component</button>
          {component}
        </div>
      );
    }

    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 Lade-Spinner) angezeigt werden.

Hier ist ein Beispiel für Lazy Load:

    import React, { Suspense } from 'react';

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

    const App = () => {
      return (
        <div>
          <h1>My App</h1>
          <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
          </Suspense>
        </div>
      );
    };

    export default App;

---

Drosselung und Entprellung

Es ist nicht nur spezifisch für React, sondern auch für die allgemeine Programmierung beim Aufrufen einer Funktion. Drosselung ist eine Technik, die die Häufigkeit definiert, mit der eine Funktion ausgeführt wird. Wenn eine Funktion gedrosselt wird, darf sie innerhalb eines angegebenen Zeitintervalls nur einmal ausgeführt werden, unabhängig davon, wie oft das Ereignis ausgelöst wird. Fügen Sie beispielsweise eine Drosselung zu einem Schaltflächenklick hinzu, damit die Schaltfläche nicht zu häufig aufgerufen wird.

Beispiel für Drosselung:

    import React, { useState } from 'react';

    function ThrottledButton() {
      const [count, setCount] = useState(0);

      const throttle = (func, delay) => {
        let lastCall = 0;
        return () => {
          const now = new Date().getTime();
          if (now - lastCall >= delay) {
            lastCall = now;
            func();
          }
        };
      };

      const incrementCount = () => {
        setCount((prevCount) => prevCount + 1);
      };

      const throttledIncrement = throttle(incrementCount, 2000);

      return (
        <div>
          <h1>Count: {count}</h1>
          <button onClick={throttledIncrement}>Click Me</button>
        </div>
      );
    }

    export default ThrottledButton;

Entprellen wird verwendet, um sicherzustellen, dass eine Funktion nach einer bestimmten Zeitspanne nach dem Aufruf der Funktion ausgeführt werden soll. Wenn ein Ereignis wiederholt auftritt, wird die entprellte Funktion erst ausgeführt, nachdem das Ereignis für den angegebenen Verzögerungszeitraum nicht mehr ausgelöst wurde. Wenn der Benutzer beispielsweise die Sucheingabe eingibt und Vorschläge macht, warten wir einige Millisekunden, bevor wir die Funktion aufrufen, damit der Benutzer die Eingabe abschließt.

Beispiel für Entprellen:

    import React, { useState } from 'react';

    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    const DebouncedSearch = () => {
      const [query, setQuery] = useState('');

      const handleSearch = (event) => {
        setQuery(event.target.value);
        console.log('Searching for:', event.target.value);
        // Here you would typically trigger an API call or filter a list based on the query
      };

      const debouncedSearch = debounce(handleSearch, 500);

      return (
        <div>
          <h1>Search</h1>
          <input
            type="text"
            placeholder="Type to search..."
            onChange={debouncedSearch}
          />
          <p>Search Query: {query}</p>
        </div>
      );
    };

    export default DebouncedSearch;

Verbinde dich mit mir

Lassen Sie uns Kontakte knüpfen und über alles, was mit Technik, Innovation und darüber hinaus zu tun hat, auf dem Laufenden bleiben! ?

• Twitter
• LinkedIn

Abschluss

Die Optimierung von React-Anwendungen ist entscheidend, um sicherzustellen, dass sie reibungslos und effizient funktionieren, insbesondere wenn sie an Komplexität und Größe zunehmen. Durch die Integration von Techniken wie Listenvirtualisierung, Memoisierung mit useMemo, Codeaufteilung, verzögertes Laden, Drosselung und Entprellen können Sie die Leistung Ihrer React-Anwendungen erheblich verbessern.

Ich hoffe, dass diese Methode bei der Optimierung der Leistung Ihrer React-Anwendung hilfreich sein wird. Vielen Dank, dass Sie den Artikel gelesen haben.

Das obige ist der detaillierte Inhalt vonOptimieren von Reaktionsanwendungen für maximale Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!