EACT -Leistungsmuster, die jeder Entwickler stehlen sollte (und wie er sie implementiert)

Die Auftriebsleistung der React -App ist für eine positive Benutzererfahrung von entscheidender Bedeutung. In diesem Artikel werden sieben bewährte Leistungsmuster beschrieben, die aus der Optimierung zahlreicher Produktionsreaktionsanwendungen hergestellt wurden.

---

1. Memoisierung mit useMemo und useCallback:

Problem: unnötige Wiederholer aufgrund unveränderter Requisiten oder Zustand.

Lösung: cache rechnerisch teure Operationen und Funktionsreferenzen.

<code class="language-javascript">const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return <ChildComponent onClick={handleClick} />;
};</code>

Best Practices: Verwenden Sie mit React.memo für untergeordnete Komponenten, um unnötige Subtree -Updates zu verhindern. Ideal für komplexe Berechnungen (Sortierung, Filterung), Rückrufe an optimierte Kinder und stabile Kontextanbieterwerte.

---

2. Lazy Loading und Code -Spaltung:

Problem: Große anfängliche Bundle -Größe, die den ersten inhaltlichen Farben (FCP) beeinflusst.

Lösung: Dynamische Importe und Suspense für das Laden von On-Demand.

<code class="language-javascript">const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  <React.Suspense fallback={<Spinner />}>
    {showCharts && <HeavyChartLibrary />}
  </React.Suspense>
);</code>

Fortgeschritten: in den React-Router für Routenbasis aufgeteilt.

.

---

3. virtualisierte Listen für große Datensätze:

Problem:

Tausende von Elementen überfordern den Dom.

Lösung: react-window

nur sichtbare Gegenstände rendert.

<code class="language-javascript">import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  <FixedSizeList height={600} itemCount={items.length} itemSize={35} width="100%">
    {({ index, style }) => (
      <div style={style}>...</div>
    )}
  </FixedSizeList>
);</code>

Bonus: VariableSizeList Verwenden Sie react-virtualized-auto-sizer für dynamische Zeilenhöhen und

für reaktionsschnelle Container.

---

4. Effizientes Zustandsmanagement:

Problem:

Mehrere Statusaktualisierungen, die kaskadierende Wiederherstellungen verursachen.

Lösung:

Hebel -Reaktion 18s automatische Charge.

reagieren 18:

<code class="language-javascript">setCount(1);
setText('Updated'); // Single re-render</code>

vor der Reaktion 18 oder für komplexe Szenarien: useReducer Verwenden Sie

für atomare Statusaktualisierungen.

---

5. Debouncing API -Aufrufe:

Problem:

übermäßige API -Anforderungen von schnellen Benutzereingaben (z. B. Suchleisten).

Lösung: useDebounce ein benutzerdefinierter

haken.

<code class="language-javascript">import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};</code>

Pro -Tipp: AbortController Kombinieren Sie mit

, um anhängige Anforderungen zu stornieren.

---

6. optimierte Kontext -API:

Problem:

unnötige Wiederholer von Kontextverbrauchern aufgrund von nicht verwandten Änderungen.

Lösung:

Splesende Kontexte und Memoize -Anbieterwerte.

---

7. optimistische UI -Updates:

Problem:

langsame Benutzeroberfläche aufgrund des Wartens auf API -Antworten.

Lösung: Sofortiges visuelles Feedback und Rollback beim Fehler geben.

---

Performance -Checkliste:

1. Profil-Rehvertreiber mit React Devtools Profiler.
2. Bündelgröße mit Source-Map-Explorer analysieren.
3. Test mit Chroms Leistungsregisterkarte (CPU -Drosselung).
4. verwenden React.memo, useMemo, useCallback strategisch.
5. inkrementelle Laden implementieren.
6. Bilder/Medien mit faulem Laden optimieren.
7. Betrachten Sie das serverseitige Rendering für kritische Inhalte.

Denken Sie daran: Profil zuerst, zweitens optimieren! Diese Techniken sind für verschiedene React -Frameworks (Next.js, Gatsby usw.) anwendbar.

Das obige ist der detaillierte Inhalt vonEACT -Leistungsmuster, die jeder Entwickler stehlen sollte (und wie er sie implementiert). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!