Heim > Web-Frontend > js-Tutorial > React-Anwendungen optimieren: Einfache Techniken für bessere Leistung

React-Anwendungen optimieren: Einfache Techniken für bessere Leistung

WBOY
Freigeben: 2024-08-06 19:09:12
Original
1065 Leute haben es durchsucht

Optimizing React Applications: Simple Techniques for Better Performance

React ist ein beliebtes Tool zum Erstellen von Benutzeroberflächen, aber wenn Apps größer werden, können sie langsamer werden. In diesem Artikel werde ich verschiedene Techniken durchgehen, mit denen Sie Ihre React-App optimieren können.

1. Vermeiden Sie unnötige erneute Renderings mit React.memo

Wenn Sie eine Komponente haben, die nicht ständig aktualisiert werden muss, umschließen Sie sie mit React.memo. Dies hilft React, sich an die letzte Ausgabe zu erinnern und das erneute Rendern zu überspringen, wenn sich nichts geändert hat.

import React from 'react';

const MyComponent = React.memo((props) => {
  // Your component logic
});
Nach dem Login kopieren

2. Verhindern Sie zusätzlichen Aufwand mit PureComponent

Wenn Sie Klassenkomponenten verwenden, erweitern Sie React.PureComponent anstelle von React.Component. Dies weist React an, nur dann erneut zu rendern, wenn sich die Requisiten oder der Status tatsächlich ändern.

import React from 'react';

class MyComponent extends React.PureComponent {
  // Your component logic
}
Nach dem Login kopieren

3. Verwenden Sie useCallback und useMemo, um Arbeit zu speichern

React Hooks useCallback und useMemo helfen Ihnen, Arbeit zu sparen, indem Sie sich Funktionen und Werte merken. Dadurch wird vermieden, dass bei jedem Rendern der Komponente neue erstellt werden.

  • useCallback: Merkt sich eine Funktion.
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
Nach dem Login kopieren
  • useMemo: Merkt sich einen Wert.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Nach dem Login kopieren

4. Code bei Bedarf mit React.lazy und Suspense laden

Laden Sie Teile Ihres Codes nur bei Bedarf mit React.lazy und Suspense. Dadurch wird Ihr anfänglicher Ladevorgang beschleunigt.

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}
Nach dem Login kopieren
Nach dem Login kopieren

5. Code nach Routen aufteilen

Laden Sie nur den Code, den Sie für jede Seite benötigen, indem Sie Ihren Code nach Routen aufteilen. Dies beschleunigt die anfänglichen Ladezeiten.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <switch>
          <route path="/" exact component="{Home}"></route>
          <route path="/about" component="{About}"></route>
        </switch>
      </suspense>
    </router>
  );
}
Nach dem Login kopieren

6. Lazy Load-Bilder und Komponenten

Verzögern Sie das Laden von Bildern und Komponenten, bis sie benötigt werden. Dies verbessert die anfängliche Ladezeit und Leistung.

  • Lazy Load Images: Verwenden Sie das Loading-Attribut im img-Tag, um Offscreen-Bilder zu verschieben.
<img src="image.jpg" alt="React-Anwendungen optimieren: Einfache Techniken für bessere Leistung" loading="lazy">
Nach dem Login kopieren
  • Lazy Load-Komponenten: Verwenden Sie React.lazy und Suspense für Komponenten.
import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}
Nach dem Login kopieren
Nach dem Login kopieren

7. Inline-Funktionen in JSX vermeiden

Inline-Funktionen in JSX können die Arbeit verlangsamen, da sie jedes Mal neue Instanzen erstellen. Definieren Sie sie außerhalb der Render-Methode oder verwenden Sie useCallback.

// Instead of this
<button onclick="{()"> doSomething()}>Click me</button>

// Do this
const handleClick = useCallback(() => {
  doSomething();
}, []);
<button onclick="{handleClick}">Click me</button>
Nach dem Login kopieren

8. Große Listen mit React Virtualization optimieren

Wenn Sie mit großen Listen arbeiten, verwenden Sie Bibliotheken wie „react-window“ oder „react-virtualized“, um nur das darzustellen, was auf dem Bildschirm sichtbar ist, und reduzieren Sie so die Belastung.

import { FixedSizeList as List } from 'react-window';

const MyList = ({ items }) => (
  <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
    {({ index, style }) => (
      <div style="{style}">
        {items[index]}
      </div>
    )}
  </list>
);
Nach dem Login kopieren

9. Drossel- und Entprellereignisse

Drosseln oder entprellen Sie häufige Funktionen, um zu steuern, wie oft sie ausgeführt werden. Dies ist besonders nützlich für Ereignisse wie Scrollen oder Tippen.

import { useCallback } from 'react';
import { debounce } from 'lodash';

const handleInputChange = useCallback(
  debounce((value) => {
    // Handle the change
  }, 300),
  []
);
Nach dem Login kopieren

10. Eindeutige Schlüssel für Listen verwenden

Stellen Sie sicher, dass jedes Listenelement über einen eindeutigen Schlüssel verfügt. Dies hilft React, Elemente zu verfolgen und effizient zu aktualisieren.

const items = list.map((item) => (
  <listitem key="{item.id}"></listitem>
));
Nach dem Login kopieren

11. Stellen Sie den Produktions-Build bereit

Verwenden Sie immer den Produktions-Build für Ihre React-App, um von Optimierungen wie Minimierung und Eliminierung von totem Code zu profitieren.

# Create a production build
npm run build
Nach dem Login kopieren

Durch den Einsatz dieser Techniken können Sie Ihre React-Anwendungen schneller und effizienter machen und Ihren Benutzern ein besseres Erlebnis bieten. Die Optimierung ist ein fortlaufender Prozess. Erstellen Sie daher regelmäßig ein Profil und verbessern Sie Ihre App.

Viel Spaß beim Codieren.

Das obige ist der detaillierte Inhalt vonReact-Anwendungen optimieren: Einfache Techniken für bessere Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage