Lernen

Der in React 16.7.0 eingeführte useReducer von React bietet eine leistungsstarke Möglichkeit, den komplexen Anwendungszustand zu verwalten. Es erfordert eine Reduzierfunktion und einen Ausgangszustand, der den aktuellen Status und eine Versandfunktion zurückgibt. Dies steht im Gegensatz zu useState , was besser für ein einfacheres Staatsmanagement geeignet ist.

Der Kern von useReducer ist seine Reduzierfunktion, die reduce von JavaScript spiegelt. Ein Reduzierer gibt immer einen einzelnen Wert (Zahl, Zeichenfolge, Array oder Objekt) zurück, wodurch mehrere Eingaben auf einen einzelnen Ausgang "reduziert" werden ". Dies macht es ideal, um Logik auf mehrere Werte anzuwenden und ein konsolidiertes Ergebnis zu generieren.

Erwägen Sie beispielsweise eine Reihe von Zahlen zu summieren:

const nummern = [1, 2, 3];
const reduzierer = (Tally, Zahl) => zahlreiche Zahl;
const Total = numbers.Reduce (Reduzierer, 0); // Die Gesamt wird 6 sein

useReducer erweitert dieses Konzept auf das staatliche Management:

const [Zustand, Versand] = Userducer (Reduzierer, InitialState, init);

Hier legt initialState den ersten Anwendungszustand fest. Die optionale init -Funktion berechnet den Anfangszustand faul, nützlich, wenn der Anfangswert von anderen Faktoren abhängt. Der Haken gibt den aktuellen state und eine dispatch zurück, um den Status zu aktualisieren.

Lassen Sie uns zur Veranschaulichung einen Autodusatzierer bauen:

Definieren Sie zunächst den Anfangszustand:

const initialState = {
  zusätzlichesPrice: 0,,
  Auto: {
    Preis: 26395,
    Name: "2019 Ford Mustang",
    Bild: "https://cdn.motor1.com/images/mgl/0an2v/s1/2019-ford-mustang-bullitt.jpg",
    Merkmale: []
  },
  speichern: [
    // ... (Liste der verfügbaren Funktionen) ...
  ]
};

Erstellen Sie als Nächstes die Reduzierfunktion, um das Hinzufügen und Entfernen von Funktionen zu verarbeiten:

const reduzierer = (Zustand, Aktion) => {
  Switch (action.type) {
    Fall "Add_Feature":
      // ... (Logik, um eine Funktion hinzuzufügen und zu aktualisieren) ...
      brechen;
    Fall "REMED_Feature":
      // ... (Logik, um eine Funktion zu entfernen und Preis zu aktualisieren) ...
      brechen;
    Standard:
      Rückkehrstaat;
  }
};

Die App -Komponente würde dann mit useReducer die Status- und Versandaktionen basierend auf Benutzerinteraktionen verwalten.

Wann wählen Sie useReducer über useState ? useReducer scheint, wenn Zustandsübergänge komplex sind oder wenn ein Zustandselement von einem anderen abhängt. Für einen einfacheren Zustand ist useState ausreichend. Während useReducer eine ähnliche Funktionalität wie Redux erzielen kann, bietet Redux zusätzliche Funktionen wie Middleware und Time-Reise-Debugging, die für sehr große Anwendungen erforderlich sein könnten. Für viele Projekte bietet useReducer jedoch eine leichte und effizientere Lösung für die Verwaltung des komplexen Zustands.

Das obige ist der detaillierte Inhalt vonLernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!