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

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
});

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
}

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]);

• useMemo: Merkt sich einen Wert.

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

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>
  );
}

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>
  );
}

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">

• 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>
  );
}

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>

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>
);

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),
  []
);

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>
));

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

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!