Reagieren Sie, wir müssen über abgeleitete Zustände sprechen!

Bei der Arbeit mit React werden Sie häufig auf Situationen stoßen, in denen Sie Werte basierend auf anderen Zuständen oder Requisiten transformieren oder ableiten müssen. Dieses Konzept ist als abgeleiteter Zustand bekannt und ist eines der leistungsstärksten Tools in Ihrem React-Toolkit – wenn es richtig verwendet wird.

„Abgeleiteter Zustand: Ein Zustand, der aus einem vorhandenen Zustand oder einer Requisite berechnet werden kann, wird als abgeleiteter Zustand bezeichnet.“

Also, lasst uns eintauchen und dabei ein bisschen Spaß haben.

---

Die schlechte Praxis: Filtern der Produktliste

Beginnen wir mit einem typischen „Ups, das habe ich mir nicht zu Ende gedacht“-Beispiel. Stellen Sie sich vor, wir haben eine Liste mit Produkten und möchten diese basierend auf dem filtern, was der Benutzer in eine Sucheingabe eingibt. In einer idealen Welt sollte unsere Suche dynamisch aktualisiert werden und superschnell sein. Aber werfen wir zunächst einen kurzen Blick auf den Bad Practice-Ansatz.

So sollten wir nicht mit den Dingen umgehen:

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [products, setProducts] = useState([
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ]);
  const [filteredProducts, setFilteredProducts] = useState(products);

  const handleSearch = (e) => {
    const query = e.target.value;
    setSearchQuery(query);
    setFilteredProducts(
      products.filter(product =>
        product.name.toLowerCase().includes(query.toLowerCase())
      )
    );
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Warum ist das eine schlechte Praxis?

Es sieht so aus, als ob es funktioniert, oder? Die Sucheingabe ist angeschlossen und filtert die Produkte wie erwartet.

Aber hier liegt das Problem: Wir speichern die gefilterten Produkte als separaten Status. Dies führt zu unnötiger Datenduplizierung. Wir haben bereits Produkte im Status und speichern das Ergebnis des Filtervorgangs in einem anderen Status, was zu potenziellen Fehlern und einer erhöhten Speichernutzung führt und es schwieriger macht, alles synchron zu halten.

Im Grunde machen wir die Dinge komplizierter, als sie sein müssen.

---

Die bewährte Vorgehensweise: Verwendung des abgeleiteten Zustands

Nun wenden wir ein wenig React-Weisheit an und korrigieren den obigen Code mithilfe des abgeleiteten Zustands.

Anstatt dieses Mal zwei separate Statusvariablen (Produkte und gefilterte Produkte) beizubehalten, leiten wir die gefilterten Produkte direkt aus dem Produktarray basierend auf der Suchabfrage ab. Auf diese Weise vermeiden wir Redundanzen und halten unseren Staat sauber.

Hier ist die verbesserte Version:

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const products = [
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ];

  // Derived state: filter products based on the search query
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Was ist die Verbesserung?

1. Kein zusätzlicher Status für gefilterte Produkte: Wir speichern keine separate Liste gefilterter Produkte mehr. Stattdessen berechnen wir die gefilterte Liste direkt aus dem Produktarray und der Suchabfrage bei jedem Rendern.
2. Saubererer Code: Die Komponente ist einfacher und es müssen weniger Zustände verwaltet werden. Dies erleichtert das Lesen und Warten.
3. Leistungssteigerung (sozusagen): React muss keine zusätzlichen Statusvariablen verfolgen. Es leitet die gefilterte Liste einfach direkt aus den vorhandenen Daten ab, wodurch der Code schlanker und schneller wird (auch wenn React Aktualisierungen optimiert, sind weniger Statusänderungen immer besser).

Dieser Ansatz nutzt den abgeleiteten Zustand, bei dem die gefilterten Produkte aus vorhandenen Daten berechnet werden, anstatt eine zusätzliche Kopie der gefilterten Daten zu speichern.

---

Wann der abgeleitete Status nicht verwendet werden sollte

Obwohl der abgeleitete Zustand oft die beste Wahl ist, ist er nicht das Allheilmittel für alles. Wenn Ihre Komponente komplexe Berechnungen oder Zustände verarbeitet, die in mehreren Teilen der Anwendung benötigt werden, ist es möglicherweise besser, die Memoisierung zu verwenden oder den abgeleiteten Zustand in einer Komponente oder einem Kontext höherer Ebene zu speichern.

Aber für einfaches Filtern, Sortieren oder andere leicht abgeleitete Werte sollte das obige Beispiel Ihr erster Ansatz sein.

---

Abschluss

Zusammenfassend lässt sich sagen, dass es beim abgeleiteten Zustand in React darum geht, die Dinge trocken zu halten – wiederholen Sie sich nicht. Anstatt unnötige Kopien derselben Daten im Status zu behalten, berechnen Sie Werte spontan auf der Grundlage des vorhandenen Status und der Requisiten. Dies führt zu saubererem, effizienterem Code, der einfacher zu warten ist. Wenn Sie also das nächste Mal versucht sind, Daten in React zu duplizieren, überlegen Sie, ob Sie diese direkt aus anderen Quellen berechnen können. Dein zukünftiges Ich wird es dir danken!

---

Das obige ist der detaillierte Inhalt vonReagieren Sie, wir müssen über abgeleitete Zustände sprechen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!