Den useReducer-Hook von React beherrschen: Komplexe Zustände mit Aktionen verwalten

Reducer Hook in React verwenden

Der useReducer-Hook ist ein integrierter React-Hook, der zur Verwaltung komplexerer Zustandslogik in Funktionskomponenten verwendet wird. Es ist eine Alternative zum useState-Hook, wenn Sie Zustände verarbeiten müssen, die mehrere Unterwerte umfassen, oder wenn die Zustandslogik komplex ist. Während sich useState gut für die Verwaltung einfacher Zustände eignet, bietet useReducer eine strukturiertere und skalierbarere Möglichkeit zur Handhabung von Zustandsaktualisierungen, insbesondere wenn Zustandsübergänge von Aktionen abhängig sind.

---

Was ist useReducer?

Der useReducer-Hook wird oft bevorzugt, wenn:

• Der Staat hat mehrere Werte, die voneinander abhängen.
• Sie haben komplexe Zustandsübergänge.
• Sie müssen Aktionen explizit behandeln (wie in Redux).

Es funktioniert durch die Verwendung einer Reduzierungsfunktion, die den aktuellen Status und eine Aktion übernimmt und einen neuen Status zurückgibt. Dieses Muster ist von der Redux State Management Library inspiriert.

---

Syntax von useReducer

const [state, dispatch] = useReducer(reducer, initialState);

• Reduzierer: Eine Funktion, die den aktuellen Status und eine Aktion übernimmt und einen neuen Status zurückgibt.
• initialState: Der Anfangszustandswert, mit dem der Reduzierer arbeitet.
• Status: Der aktuelle Status, aktualisiert durch den Reduzierer.
• Versand: Eine Funktion zum Senden von Aktionen an den Reduzierer, der Statusaktualisierungen auslöst.

---

Wie useReducer funktioniert

1. Erstellen Sie eine Reduzierfunktion: Die Reduzierfunktion erhält zwei Argumente: den aktuellen Status und die Aktion. Es verwendet diese, um einen neuen Zustand zu berechnen und zurückzugeben.

   const reducer = (state, action) => {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   };

1. Definieren Sie den Anfangszustand: Der initialState ist der Ausgangspunkt des Zustands, bevor Aktionen ausgelöst werden.

   const initialState = { count: 0 };

1. Verwenden Sie useReducer in Ihrer Komponente: Jetzt können Sie innerhalb Ihrer Komponente useReducer verwenden, um den Status zu verwalten. Sie erhalten Status und Versand vom Haken.

   const Counter = () => {
     const [state, dispatch] = useReducer(reducer, initialState);

     return (
       <div>
         <p>Count: {state.count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
       </div>
     );
   };

• Erklärung:
  • Wenn auf die Schaltfläche „Inkrementieren“ geklickt wird, wird eine Aktion vom Typ „Inkrementieren“ ausgelöst.
  • Die Reduzierfunktion empfängt diese Aktion und aktualisiert den Status entsprechend.
  • Der Versand wird verwendet, um eine Statusaktualisierung auszulösen, indem eine Aktion an den Reduzierer gesendet wird.

---

Vollständiges Beispiel mit useReducer:

Hier ist ein vollständiges Beispiel, das die Verwendung von useReducer zum Verwalten eines Zählers zeigt:

const [state, dispatch] = useReducer(reducer, initialState);

• Erklärung:
  • useReducer wird mit der Reducer-Funktion und dem initialState.
  initialisiert
  • Der Versand wird verwendet, um die Aktionen auszulösen (Inkrementieren, Dekrementieren oder Zurücksetzen).
  • Jede Aktion führt zu einer Statusaktualisierung basierend auf dem Aktionstyp.

---

Wann sollte useReducer über useState verwendet werden?

• Komplexe Zustandslogik:Wenn der Zustand mehrere Unterwerte oder komplexe Übergänge zwischen Zuständen umfasst.

Beispiel: Verwalten eines Formulars mit mehreren Feldern, wobei die Felder unabhängig voneinander aktualisiert werden müssen, aber voneinander abhängig sind.

• Besser für mehrere Aktionen: Wenn Ihre Komponente über verschiedene Aktionen verfügt, die den Status auf verschiedene Weise ändern (z. B. erhöhen, verringern, zurücksetzen).

• Debugging: useReducer ist vorhersehbarer und testbarer. Da die Zustandsübergänge explizit sind (durch Aktionen), ist es einfacher, Änderungen zu verfolgen und Fehler zu beheben.

• Eher ähnlich wie Redux: Wenn Sie eine größere App erstellen, die später Redux verwenden wird, hat useReducer ein ähnliches Muster und kann ein gutes Sprungbrett sein.

---

Leistungsaspekte

• Batching: In React werden durch useReducer ausgelöste Aktualisierungen gestapelt, was bedeutet, dass mehrere Sendungen (auch wenn sie schnell hintereinander erfolgen) in einem Renderzyklus verarbeitet werden, was die Leistung verbessern kann.

• Übermäßige Verwendung vermeiden: Wenn Ihre Zustandslogik einfach ist (z. B. ein einzelner Zähler), ist die Verwendung von useState im Allgemeinen einfacher und vermeidet unnötige Komplexität. Verwenden Sie useReducer, wenn Sie mehr Struktur benötigen.

---

Vergleich von useState und useReducer

Funktion useState useReducer

Feature	useState	useReducer
Simplicity	Ideal for simple state with primitive values	Best for complex state or multiple actions
State Structure	Works well for single values or arrays/objects	Great for state objects with multiple sub-values
Action Handling	Doesn’t require actions; just updates state directly	Requires action objects to update state
Use Case	Small, independent pieces of state	Complex state transitions with many actions

Einfachheit Ideal für einfache Zustände mit primitiven Werten Am besten für komplexe Zustände oder mehrere Aktionen geeignet Staatsstruktur Funktioniert gut für einzelne Werte oder Arrays/Objekte Ideal für Zustandsobjekte mit mehreren Unterwerten Aktionsbehandlung Erfordert keine Aktionen; Aktualisiert den Status einfach direkt Erfordert Aktionsobjekte zum Aktualisieren des Status Anwendungsfall Kleine, unabhängige Staaten Komplexe Zustandsübergänge mit vielen Aktionen

---

Zusammenfassung der Verwendung des Reduzierhakens

• useReducer wird zur Verwaltung komplexer Zustandslogik in React verwendet.
• Es bietet im Vergleich zu useState mehr Kontrolle über Zustandsübergänge und ist ideal, wenn der Zustand von Aktionen abhängig ist oder auf strukturierte Weise aktualisiert werden muss.
• Der Hook gibt ein Array zurück: den aktuellen Status und eine Dispatch-Funktion zum Auslösen von Aktionen, die den Status aktualisieren.
• Es verwendet eine Reduzierungsfunktion, die den aktuellen Status und eine Aktion zum Berechnen und Zurückgeben eines neuen Status empfängt.

---

Fazit

Der useReducer-Hook ist leistungsstark für die Verwaltung komplexer Zustandslogik in React. Es gibt Ihnen mehr Kontrolle über Statusaktualisierungen und erleichtert die Handhabung von Statusübergängen, die von mehreren Werten oder Aktionen abhängen. Wenn Ihre Komponente einen komplexen Zustand hat, der strukturierte Aktualisierungen erfordert, oder wenn Sie von Redux kommen, ist useReducer eine großartige Lösung.

---

Das obige ist der detaillierte Inhalt vonDen useReducer-Hook von React beherrschen: Komplexe Zustände mit Aktionen verwalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!