reagieren Sie Memo: Boosting React Performance mit einfacher Memoisierung

Einführung

Reag-Anwendungen befassen sich häufig mit großen Datensätzen und komplexen Komponenten, in denen unnötige Wiederholer die Leistung erheblich beeinflussen können. Um dies zu beheben, bietet React React.Memo - ein einfaches, aber leistungsstarkes Tool, um Komponenten zu optimieren und die Renderzeiten zu verkürzen. In dieser Anleitung werden wir untersuchen, wie React Memo funktioniert, warum es nützlich ist und wie es Schritt für Schritt implementiert wird.

Was ist React Memo?

react.memo ist eine Komponente höherer Ordnung (HOC) in React, die bei der Memoisierung funktioneller Komponenten hilft. Bei der Memoisierung wird der Ausgang der Ausgabe einer Funktion basierend auf ihren Eingängen zwischengespeichert, sodass die Funktion das Ergebnis für dieselben Eingänge nicht neu berechnen muss. React Memo funktioniert ähnlich: Es erinnert sich an die zuletzt gerenderte Ausgabe einer Komponente und rägt sie nur erneut, wenn sich ihre Requisiten ändern.

Warum Memo reagieren?

In React werden die Komponenten wieder rendern, wenn ihre übergeordneten Komponenten erneut rendern. Dies kann zu Ineffizienzen führen, wenn die Ausgabe einer Komponente nicht von den Änderungen seiner Eltern abhängt. In komplexen Benutzeroberflächen mit vielen Komponenten könnten Sie beispielsweise eine Verzögerung aufgrund übermäßiger Wiedererleber sehen. Die Verwendung von React -Memo kann dies optimieren, indem nur bei Bedarf Komponenten aktualisiert werden.

Probleme reagieren Memo -Lösung

1. Unnötige Wiederholer

Wenn eine übergeordnete Komponente erneut ausgereift wird, werden auch seine untergeordneten Komponenten wieder rendern. Dies kann zu Engpässen von Leistung führen, insbesondere wenn Komponenten statische Daten anzeigen oder sich auf unveränderliche Requisiten verlassen.

2. Laggy oder langsame Leistung in komplexer Benutzeroberfläche

Anwendungen mit tief verschachtelten Komponenten können aufgrund kumulativer Neubindungen eine langsame Leistung ausgesetzt sein. Memoisierung mit React-Memo hilft bei der Verhinderung von Wiederherstellungen von Komponenten, die keine Aktualisierungen erfordern und die Reaktionsfähigkeit der App verbessern.

Wie React Memo funktioniert: Schritt-für-Schritt-Beispiel

Lassen Sie uns eine grundlegende Implementierung von React Memo durchlaufen. Wir beginnen mit einer einfachen Komponente, die keine Memoisierung verwendet, und sehen, wie das Hinzufügen von React -Memo einen Unterschied macht.

Schritt 1: Richten Sie eine einfache Gegenkomponente ohne React -Memo ein

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

Erläuterung

In diesem Beispiel, jedes Mal, wenn Sie das Eingabefeld eingeben, bleibt die Re-Rehverschlüsse der Zählerkomponente, obwohl der Zählwert gleich bleibt. Dies ist ein unnötiger Neurender, den wir mit React Memo verhindern können.

Schritt 2: Optimierung mit React Memo

Jetzt wickeln wir die Zählerkomponente mit react.memo ein, um sie zu optimieren.

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

Erläuterung

Mit react.memo wechselt die Zählerkomponente nur wieder, wenn sich ihre Anzahl von Requisiten ändert. Das Eingeben im Eingabefeld löst nun keine Wiederholung des Zählers mehr aus, wodurch die Leistung erheblich optimiert wird.

React Memo in Aktion: Ein praktisches Szenario mit Listen

Lassen Sie uns in ein komplexeres Beispiel eintauchen, um die wirklichen Vorteile von React Memo zu sehen. Angenommen, wir haben eine Liste von Elementen mit einer Schaltfläche "Gefällt mir" neben jedem Element. Wir werden demonstrieren, wie React Memo übermäßige Wiedererleber verhindern kann, wenn sie einzelne Elemente mögen.

Schritt 1: Erstellen Sie die Listenkomponente ohne Memo

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like
    
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes   1 } : item
      )
    );
  };

  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

export default ItemList;

Problem

Im obigen Code, wenn Sie einen Element mögen, ändern sich alle Elemente neu, obwohl sich nur der Element ändern.

Schritt 2: Die Elementkomponente mit React Memo optimieren

const Item = React.memo(function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like ({item.likes})
    
  );
});

Ergebnis

Nun wird nur der Artikel, den Sie mögen, wieder rendern und die Benutzeroberfläche viel schneller und effizienter macht.

Wann kann React Memo verwendet werden?

React Memo ist in bestimmten Szenarien nützlich, aber überall kann es Ihren Code komplizieren, ohne einen echten Nutzen zu erzielen. Hier sind einige wichtige Situationen, in denen es besonders effektiv sein kann:

1. statische Komponenten : Komponenten, die sich nicht oft ändern, wie Header oder Fußzeilen.
2. reine funktionale Komponenten : Komponenten, die ausschließlich von Requisiten für das Rendern abhängen.
3. Große Listen von Komponenten : Listen mit vielen Elementen, die unnötige Wiederholer vermeiden müssen.

Mögliche Fallstricke und Best Practices

1. flaches Vergleich : React Memo führt einen flachen Vergleich durch, was bedeutet, dass es keine Änderungen in tief verschachtelten Objekten oder Arrays erkennt. Erwägen Sie, Usememo oder Usecallback zu verwenden, wenn Sie komplexe Requisiten übergeben.

2. Performance Monitoring : Verwenden Sie React DevTools, um zu identifizieren, welche Komponenten tatsächlich von der Memoisierung profitieren. Überbeanspruchung von React Memo kann zu Codekomplexität mit vernachlässigbaren Leistungsgewinnen führen.

Häufig gestellte Fragen (FAQ)

F1: Wie unterscheidet sich React Memo von Usememo und Usecallback?

• react memo optimiert Komponenten-Re-Reher basierend auf Requisiten.
• useememo caches berechnete Werte in einer Komponente.
• usecallback Caches Funktionen und verhindert, dass sie bei jedem Render nachgebildet werden.

F2: Kann ich React Memo mit Klassenkomponenten verwenden?

Nein, React Memo ist nur für funktionale Komponenten. Für Klassenkomponenten kann jedoch ein ähnliches Verhalten mit PureComponent erreicht werden.

Abschluss

React Memo ist ein wertvolles Instrument, um unnötige Wiederherstellungen zu reduzieren und die Anwendungsleistung zu steigern. Indem Sie es selektiv in reinen Funktionskomponenten oder statischen UI -Elementen verwenden, können Sie Ihre React -App optimieren, ohne die Struktur zu erschweren. Befolgen Sie diese Schritte, probieren Sie die Beispiele aus und experimentieren Sie weiter, um die besten Memoisierungsstrategien für Ihr Projekt zu finden!