UseState vs. useReducer in React: Den richtigen State-Management-Hook auswählen

Wenn Sie einen Webentwicklungsjob ergattern möchten, haben Sie bessere Erfolgschancen, wenn Sie sich mit der React-JavaScript-Bibliothek vertraut machen. React ist eine der am häufigsten verwendeten Bibliotheken der Branche. Und eines der interessantesten Features der React-Bibliothek ist das Konzept der Hooks.

Hooks sind einfach JavaScript-Funktionen, die die Logik in einer React-Anwendung isolieren und Ihnen die Wiederverwendung ermöglichen. Für die Statusverwaltung stehen Ihnen zwei Haupt-Hooks zur Verfügung: der useState Haken und die useReducer Haken.

Übersicht über den useState Hook

Der useState Hook ist die gebräuchlichste Methode zur Statusverarbeitung in React. Die folgende Syntax veranschaulicht, wie Sie diesen Hook in Ihrer Anwendung verwenden:

const [state, setState] = useState (initialStateValue);

Im Codeblock oben ist die

Zustand Die Variable speichert Daten zwischen den Renderings im Speicher. Und setState ist die „Setter“-Funktion, die das manipuliert Zustand Variable.

Der useState Hook gibt ein Array mit genau zwei Elementen zurück. Es nimmt auch einen Anfangswert für die Zustandsvariable an.

Wenn Sie beispielsweise eine Statusvariable definieren möchten, die das Alter des Benutzers mit einem Anfangswert von 17 darstellt, gehen Sie folgendermaßen vor:

const [userAge, setUserAge] = useState(17);

Der setUserAge Die Funktion ist für die Änderung der verantwortlich Benutzeralter Zustandsvariable.

setUserAge(19);

Es ist wichtig zu beachten, dass das Aktualisieren des Status ein erneutes Rendern der Komponente auslöst und das unsachgemäße Aktualisieren einer Statusvariablen zu einer Endlosschleife führen kann, die Ihren Code beschädigen kann.

In React ist es nicht ratsam, den Zustand direkt zu ändern (wie im Codeblock unten gezeigt), da Änderungen an Nicht-Zustandsvariablen zwischen dem Rendern der Komponente nicht bestehen bleiben.

userAge = 19;

Der Zustand ist lokal für die Komponente, die ihn definiert. Wenn dieselben Komponenten mehrmals auf dem Bildschirm gerendert werden, hat jede Komponente ihren eigenen unabhängigen Status.

FunktionApp(){
zurückkehren (




 </div>
 )
}

Im obigen Codeblock gibt es zwei Schalten Komponenten, aber jede Komponente verwaltet ihren eigenen Status und ist nicht auf die andere Komponente angewiesen, es sei denn, eine Komponente teilt ihren Status mit der anderen Komponente.

React verarbeitet Statusaktualisierungen durch Stapelverarbeitung. Das heißt, wenn Sie die Setter-Funktion einer Zustandsvariablen aufrufen, wird die Zustandsvariable erst beim nächsten erneuten Rendern aktualisiert.

Übersicht über den useReducer Hook

useReducer ist ein React-Hook Dies kann immer dann nützlich sein, wenn Sie mehrere verwandte Zustände gleichzeitig bearbeiten möchten. Die Syntax für useReducer sieht ungefähr so ​​aus:

const [State, Dispatch] = useReducer (Reducer, InitialState)

Im Vergleich zu useState, In useReducer, da ist ein Zustand variabel und a versenden Funktion, die Aktionen an den sendet Reduzierstück Funktion, die Nutzlasten verarbeitet und aktualisiert Zustand.

Angenommen, Sie erstellen eine einfache Zähleranwendung mit Schaltflächen, mit denen Sie den Zähler zurücksetzen, den Zählerwert erhöhen oder verringern können. Benutzen useState Ihr Code sieht in etwa so aus:

FunktionSchalter(){
const [count, setCount] = useState(0);
zurückkehren(


 Die Anzahl ist: {count}


 setCount (Anzahl + 1)}>Anzahl erhöhen</button>
 setCount(0)}>Zurücksetzen</button>
 setCount (Anzahl - 1)}>Anzahl verringern</button>
 </div>
 </div>
 )
}

Die obige Implementierung funktioniert perfekt. Die gleichen Ergebnisse können Sie aber auch mit Hilfe des erreichen useReducer Haken.

Dieses Beispiel soll lediglich zeigen, wie das funktioniert useReducer Haken funktioniert. In einer realen Anwendung useReducer ist für dieses Szenario übertrieben.

useReducer erleichtert den Umgang mit verwandten Zuständen und komplexer Logik basierend auf dem Typ im Versand übergeben Aktion Objekt.

Beispielsweise könnte die Versandfunktion eine senden Aktion Objekt, das etwa so aussieht:

{Typ:„Aktionstyp“, Nutzlast:Zustand * 2}

Importieren Sie zunächst die useReducer Haken, dann definieren Sie die Reduzierstück Funktion mit den Parametern: Zustand und das Destrukturierte Aktion Objekt.

importieren {useReducer} aus"reagieren";
FunktionReduzierstück(Zustand, {Typ, Nutzlast}) {
Wenn (Typ 'countIncrease') {
zurückkehren Nutzlast;
 } andersWenn (Typ 'countDecrease') {
zurückkehren Nutzlast;
 } andersWenn (Typ 'countReset') {
zurückkehren Nutzlast;
 } anders {
zurückkehren Zustand;
 }
}

Nach der Definition der Reduzierstück Funktion, Sie können die erstellen Schalter Komponente mit der useReducer Haken.

FunktionSchalter() {
const [Anzahl, Versand] = useReducer (Reduzierer, 0);
zurückkehren (


 Die Anzahl ist: {count}


 versenden({ Typ: 'countIncrease', Nutzlast: zählen + 1 })}>
 Anzahl erhöhen
 </button>
 versenden({ Typ: 'countReset', Nutzlast: 0 })}>
 Zähler zurücksetzen
 </button>
 versenden({ Typ: 'countDecrease', Nutzlast: zählen - 1 })}>
 Anzahl erhöhen
 </button>
 </div>
 </div>
 );
}

Im obigen Codeblock löst die erste Schaltfläche eine Aktion vom Typ aus countIncrease mit einer Nutzlast von zählen + 1. Diese Aktion ist für die Erhöhung des Zählwerts verantwortlich.

Die zweite Schaltfläche löst eine Aktion vom Typ aus countReset mit einer Nutzlast von 0, wodurch der Zählwert wieder auf 0 zurückgesetzt wird.

Die dritte Schaltfläche löst eine Aktion vom Typ aus countDecrease mit einer Nutzlast von zählen - 1 wodurch der Zählwert um 1 verringert wird.

Auswahl zwischen useState- und useReducer-Hooks

Jetzt wissen Sie, wie man es benutzt useState Und useReducer Bei Haken ist es wichtig zu wissen, wann man den richtigen verwendet.

Wenn Ihr Bundesstaat keine komplexe Logik erfordert, dann ist dies offensichtlich der Fall useReducer kann übertrieben sein.

Wenn Ihr Bundesstaat alles andere als das ist JavaScript-Grundelemente wie Zahlen, Zeichenfolgen und boolesche Werte, sollten Sie die verwenden useState Haken. Und wenn der Zustandstyp ein Objekt oder ein Array ist, sollten Sie die Verwendung in Betracht ziehen useReducer stattdessen.

Mit zunehmender Komplexität Ihrer Anwendung wird es schwieriger, den Zustand allein mit dem zu verwalten useState Und useReducer Haken.

Das ist wenn Sie können externe Bibliotheken wie Redux verwenden, Jotai und Zustand. Diese Bibliotheken erleichtern die Handhabung von Zustandsänderungen über mehrere Komponenten hinweg.

Vereinfachen Sie die Zustandsverwaltung mit JavaScript-Bibliotheken

Bibliotheken wie React, Vue und Svelte haben alle ihre eigenen Methoden zum Umgang mit Zuständen. Sie können es auf jeden Fall versuchen, die Zustandsverwaltung selbst mit Vanilla-JavaScript zu verwalten, aber es ist viel einfacher und bequemer, eine kampferprobte JavaScript-Bibliothek zu verwenden.

Wenn Sie mit React eine komplexe Anwendung erstellen, bei der Sie mehrere Komponenten verwalten müssen, ist Redux möglicherweise die beste Wahl für Sie.