useState - einer der wichtigsten Haken von React. Damit können Sie Funktionskomponenten einen Status hinzufügen. In diesem Artikel werden wir uns ansehen, wie Sie es verwenden useState und wie es hilft, Variablen und Zustände zu verwalten.
So verwenden Sie useState Sie müssen es aus der React-Bibliothek importieren. Außerdem müssen Sie eine Variable erstellen, die den aktuellen Statuswert speichert, und eine Funktion, mit der Sie diesen Wert ändern können. Der Anfangswert des Zustands wird als Argument an die Funktion übergeben useState.
Wenn eine Funktionskomponente gezeichnet wird, wird useState aufgerufen und gibt ein Array mit dem aktuellen Statuswert und der Funktion zurück, um es zu aktualisieren. Als nächstes können Sie die resultierenden Werte in der Komponente verwenden. Wenn Sie eine Funktion aufrufen, um den Status zu aktualisieren, wird die Komponente mit den aktuellen Werten neu gezeichnet.
useState sehr nützlich für die Verwaltung von Formularen, Timern und anderen Fällen, in denen Änderungen von Werten überwacht werden müssen, während die Anwendung ausgeführt wird. Verwendend useState. der Entwicklungsprozess für funktionale Komponenten kann vereinfacht und verbessert werden.
Was ist useState und wie funktioniert es
Um den useState-Hook zu verwenden, müssen Sie ihn aus der React-Bibliothek importieren:
import React, from 'react';
Nach dem Import können Sie den Status mithilfe der useState-Funktion deklarieren:
const [state, setState] = useState(initialValue);
useState nimmt den Anfangswert des Status initialValue an und gibt ein Array zurück, das den aktuellen Statuswert und die Funktion enthält, mit der Sie ihn aktualisieren können. Das Array wird dann analysiert, indem es in die Variablen state und setState destrukturiert wird.
Sie können die Variable state verwenden, um den aktuellen Statuswert abzurufen. Um den Status zu aktualisieren, rufen Sie die setState-Funktion auf, indem Sie einen neuen Wert an sie übergeben. React rendert dann die Komponente erneut und zeigt den neuen Statuswert an.
Dieser Prozess wird als "Zustand mit Haken" bezeichnet und bietet im Gegensatz zu "Zustand mit Klassen" eine einfachere und visuellere Möglichkeit, mit einem Zustand in Funktionskomponenten zu arbeiten.
Es ist wichtig zu beachten, dass der useState-Hook den lokalen Zustand einer Komponente darstellt und an ihre Instanz gebunden ist. Jede Komponente, die den useState-Hook verwendet, hat unabhängig von anderen Instanzen dieser Komponente ihren eigenen Status.
Grundprinzipien der Verwendung von useState
1. useState importieren
Um useState zu verwenden, müssen Sie es aus React importieren:
import React, < useState >from 'react';2. Initialisierung des Zustands
useState ermöglicht es uns, den Status zu initialisieren. Wir übergeben den Anfangswert des Zustands als Argument, wenn wir useState aufrufen. Zum Beispiel:
const [count, setCount] = useState(0);Hier initialisieren wir den count-Status mit dem Wert 0 und erstellen eine setCount-Funktion, um ihn zu aktualisieren.
3. Verwenden des Status in einer Komponente
Nachdem der Status initialisiert wurde, können wir ihn in unserer Komponente verwenden. Zum Beispiel können wir den Count-Statuswert anzeigen:
Count:
4. Status aktualisieren
Wir können den Status mit der setCount-Funktion aktualisieren, die wir bei der Initialisierung erstellt haben:
const increment = () => ; In diesem Beispiel erhöhen wir den count-Statuswert bei jedem Aufruf der Increment-Funktion um 1.
5. Verwenden der funktionalen Statusaktualisierung
useState unterstützt auch eine funktionale Statusaktualisierung. Anstatt einen neuen Wert an die setCount-Funktion zu übergeben, können wir eine Funktion übergeben, die den vorherigen Statuswert annimmt und einen neuen Wert zurückgibt. Zum Beispiel:
const increment = () => prevCount + 1);>; In diesem Fall verwenden wir die Funktion prevCount => prevCount + 1, um den count-Statuswert um 1 zu erhöhen.
Dies sind die Grundprinzipien der Verwendung von useState. Es bietet eine einfache und bequeme Möglichkeit, den Status in den React-Funktionskomponenten hinzuzufügen und zu aktualisieren.
Wie deklariere ich einen Status mit useState
In React stellt ein Zustand eine Möglichkeit dar, die Daten einer Komponente während ihres Lebenszyklus zu speichern und zu ändern. Sie können den Status mit dem useState-Hook deklarieren, der in React ab Version 16.8 verfügbar ist.
Um einen neuen Zustand mit useState zu deklarieren, müssen Sie diesen Hook aufrufen und ihm den Anfangswert des Zustands als Argument übergeben. Wenn Sie beispielsweise den Status der Variablen count deklarieren und ihren Anfangswert auf 0 festlegen möchten, können Sie den folgenden Code verwenden:
const [count, setCount] = useState(0);In diesem Beispiel gibt useState ein Array aus zwei Elementen zurück: eine count-Variable, die den aktuellen Statuswert enthält, und eine setCount-Funktion, mit der Sie den Statuswert ändern können. Die setCount-Funktion akzeptiert ein Argument, das zum neuen Statuswert wird.
Sie können die Variable count verwenden, um auf den Statuswert zuzugreifen. Der Wert kann beispielsweise wie folgt auf einer Seite angezeigt werden:
Счетчик:
Wenn die setCount-Funktion mit einem neuen Wert aufgerufen wird, rendert React die Komponente neu und aktualisiert sie mit dem neuen Statuswert. Die Komponente zeigt immer den aktuellen Statuswert an.
Der useState-Hook kann mehrmals innerhalb einer einzelnen Komponente verwendet werden, um mehrere verschiedene Zustände zu deklarieren. Jeder Status muss in einem separaten Aufruf von useState deklariert werden.
Die Verwendung des useState-Hooks ist eine einfache und effiziente Möglichkeit, den Status einer Komponente in React zu verwalten. Damit können Sie interaktive Komponenten erstellen, die ihre interne Logik und Anzeige basierend auf dem aktuellen Statuswert ändern können.
Wie bekomme ich den aktuellen Statuswert?
Um den aktuellen Statuswert abzurufen, müssen Sie auf das erste Element des Arrays verweisen, das den useState-Hook zurückgibt. Wenn beispielsweise der folgende Haken im Code verwendet wurde:
const [count, setCount] = useState(0);Der aktuelle Statuswert entspricht der Variablen count . Um diesen Wert zu erhalten, rufen Sie einfach die Variable count an der richtigen Stelle im Code auf. Zum Beispiel:
Sie können auch den aktuellen Statuswert verwenden, um ihn auf der Seite anzuzeigen. Sie können beispielsweise ein Element erstellen
oder legen Sie den Textinhalt mithilfe der Variablen count auf den aktuellen Statuswert fest. Zum Beispiel:
Текущее значение состояния:
Daher kann der aktuelle Statuswert abgerufen werden, indem auf die Variable zugegriffen wird, die diesen Wert enthält. Dadurch können Sie den Statuswert für verschiedene Vorgänge und Zuordnungen in der Komponente verwenden.
Wie ändere ich den Status mit useState
Zu verwenden useState sie müssen es aus der React-Bibliothek importieren:
import React, < useState >from 'react';Dann können wir den Status und seinen Wert innerhalb der Funktionskomponente deklarieren:
const [count, setCount] = useState(0);In diesem Beispiel deklarieren wir den Status count und setzen Sie den Wert beim Initialisieren der Komponente auf 0.
Dann können wir diesen Zustand innerhalb der Komponente verwenden, um beispielsweise den aktuellen Zählerwert anzuzeigen:
Count:
Um den Statuswert zu ändern, verwenden wir die zurückgegebene Funktion useState - setCount. Durch Aufrufen dieser Funktion können Sie den Statuswert aktualisieren:
const increment = () => prevCount + 1);> In diesem Beispiel erhöhen wir den Zählerwert bei jedem Funktionsaufruf um eins increment.
Es ist wichtig sich daran zu erinnern, dass die Änderung des Zustands mit useState asynchron. Dies bedeutet, dass aufeinanderfolgende Aufrufe der Statusänderungsfunktion zu einem einzelnen Batch zusammengeführt und ausgeführt werden können, nachdem der aktuelle Render der Komponente abgeschlossen ist.
Daher ist die Verwendung useState ermöglicht es uns, den Status in den React-Funktionskomponenten einfach zu verwalten, und seine rechtzeitige Aktualisierung stellt sicher, dass die Änderungen dem Benutzer korrekt angezeigt werden.
Wie übergebe ich einen Anfangswert an useState
Wenn wir den useState-Hook verwenden, können wir einen Anfangswert an ihn übergeben. Der Anfangswert bestimmt, welcher Wert der Variablen beim ersten Rendern der Komponente zugewiesen wird.
Es gibt zwei Möglichkeiten, einen Anfangswert an useState zu übergeben:
- Übergeben Sie einen Wert als Argument an die useState-Funktion. Zum Beispiel:
const [count, setCount] = useState(0);Im obigen Beispiel übergeben wir 0 als Anfangswert für die Variable count. Count hat jetzt beim ersten Rendern der Komponente den Wert 0.
- Verwenden Sie die Initialisierungsfunktion innerhalb des useState. Zum Beispiel:
const [count, setCount] = useState(() => );In diesem Fall übergeben wir eine Funktion, die den Anfangswert (in diesem Fall 0) an useState zurückgibt. Diese Methode ist nützlich, wenn der Anfangswert von anderen Variablen abhängt oder Sie komplexe Logik ausführen müssen, um ihn zu definieren.
In beiden Fällen gibt useState ein Wertepaar zurück: der aktuelle Wert der Variablen und die Funktion, um sie zu aktualisieren (setCount in unseren Beispielen). Wir verwenden diese Funktion, um den Wert einer Variablen in Zukunft zu ändern.
Wenn wir also den Anfangswert an useState übergeben, können wir den Wert der Variablen beim ersten Rendern der Komponente festlegen und die volle Kontrolle darüber haben, sie später zu aktualisieren.
Wie verwende ich useState, um mit Formularen zu arbeiten
Zuerst müssen wir den Haken importieren useState aus der React-Bibliothek:
import React, < useState >from "react";Dann können wir den Haken verwenden useState innerhalb unserer Funktionskomponente. Um mit Formularen zu arbeiten, müssen wir den Anfangswert für den Status festlegen und einen Wertänderungshandler erstellen.
Betrachten wir ein Beispiel für ein einfaches Formular in einer Funktionskomponente:
function Form() return ();>Im obigen Beispiel haben wir einen Status erstellt name und Funktion setName mit einem haken useState. Der Standardwert für name auf eine leere Zeichenfolge gesetzt.
Beachten Sie, dass wir den Wert des Eingabefeldes an den Status binden name verwenden eines Attributs value und übergeben Sie einen Wertänderungshandler handleChange über das Attribut onChange.
Jedes Mal, wenn sich ein Wert im Eingabefeld ändert, wird ein Handler aufgerufen handleChange, die den Status aktualisiert name mit einem neuen Wert. Durch eine Änderung des Zustands wird die Komponente erneut gerendert und der neue Wert im Eingabefeld angezeigt.
So verwenden wir den Haken useState erstellen und Aktualisieren von Status in Funktionskomponenten. Es ermöglicht uns, leicht mit Formularen zu arbeiten, indem wir die Werte der Eingabefelder aktualisieren und deren Änderungen verfolgen.
Wie verwende ich useState, um mit Arrays zu arbeiten
Verwendung useState es erfordert einige Funktionen, um mit Arrays zu arbeiten. Der ursprüngliche Statuswert muss ein Array sein, sonst müssen wir es in ein Array konvertieren.
So erstellen Sie einen Array-Status mit useState sie müssen die folgende Syntax verwenden:
const [array, setArray] = useState([]);
In diesem Beispiel ist array das Array selbst, und setArray ist eine Funktion, mit der wir den Status des Arrays aktualisieren.
Wenn Sie den Status eines Arrays mit setArray aktualisieren, müssen Sie berücksichtigen, dass React die Änderungen im Array nicht automatisch zusammenführt. Stattdessen müssen Sie eine Callback-Funktion verwenden, um explizit anzugeben, wie der Status des Arrays geändert werden soll.
Sie können beispielsweise den folgenden Code verwenden, um einem Array ein Element hinzuzufügen:
setArray(prevArray => [. prevArray, newElement]);
In diesem Beispiel ist das prevArray der vorherige Zustand des Arrays und das newElement ist das neue Element, das wir hinzufügen möchten. Mit dem Array-Erweiterungsoperator [. prevArray, newElement] wir erstellen eine neue Kopie des Arrays, zu dem wir ein neues Element hinzufügen.
Ebenso können Sie den folgenden Code verwenden, um ein Element aus einem Array zu entfernen:
setArray(prevArray => prevArray.filter(item => item !== elementToRemove));
Hier ist elementToRemove das Element, das wir aus dem Array entfernen möchten. Mit der filter-Methode erstellen wir ein neues Array, das nur die Elemente enthält, für die die Funktion das Prädikat item => item !== elementToRemove gibt true zurück .
Auch, mit useState Sie können komplexere Strukturen innerhalb eines Arrays aktualisieren, z. B. Objekte oder verschachtelte Arrays. Sie können dieselben Methoden verwenden, um dies zu tun: [. prevArray, newElement] um ein Element hinzuzufügen, prevArray.filter(item => item !== elementToRemove), um das Element zu löschen.
Jetzt wissen Sie, wie man es benutzt useState um mit Arrays zu arbeiten. Denken Sie daran, dass Sie beim Aktualisieren eines Arrays die Rückruffunktion verwenden und alle Statusänderungen explizit angeben müssen.
Wie verwende ich useState mit Objekten
Der useState-Hook in React ermöglicht es uns, einen Zustand in funktionalen Komponenten zu erstellen. Das Speichern und Aktualisieren des Zustands von Objekten kann jedoch etwas komplizierter sein als einfache Werte. In diesem Fall müssen wir useState in Verbindung mit der Statusaktualisierungsfunktion verwenden.
Um mit Objekten in useState zu arbeiten, können wir die Destrukturierung verwenden. Wenn wir beispielsweise ein user-Objekt mit den Feldern name und age haben, können wir seinen Status wie folgt erstellen:
const [user, setUser] = useState(< name: '', age: 0 >);In diesem Beispiel ist user ein Statusobjekt und setUser eine Statusaktualisierungsfunktion. Der ursprüngliche Zustand des Objekts kann jedoch auch mithilfe der defaultValue-Eigenschaft festgelegt werden:
const [user, setUser] = useState(< name: '', age: 0 >, defaultValue);Um den Status eines Objekts zu aktualisieren, können wir die setUser-Funktion verwenden und ihm den neuen Status als Objekt übergeben, das mit dem aktuellen Status kombiniert wird. Um beispielsweise den Benutzernamen zu ändern, können wir schreiben:
setUser(< . user, name: 'John' >);In diesem Beispiel erstellen wir ein neues Objekt, indem wir alle Felder aus dem aktuellen Zustand (user) kopieren und nur das Feld name ändern. Dadurch bleiben die anderen Felder unverändert.
Eine weitere wichtige Sache, die Sie beim Arbeiten mit Objekten in useState beachten sollten, ist, dass die Statusaktualisierungsfunktion die Objekte nicht kombiniert, sondern vollständig ersetzt. Um alle Felder eines Objekts außer den geänderten zu speichern, müssen Sie daher die Destrukturierung verwenden. Um beispielsweise nur das Age-Feld zu ändern:
setUser(< . user, age: user.age + 1 >);In diesem Beispiel erstellen wir ein neues Objekt, indem wir alle Felder aus dem aktuellen Zustand (user) kopieren und den Wert des Felds age um 1 erhöhen.
Die Verwendung von useState mit Objekten ermöglicht es uns, den Status komplexer Objekte in Funktionskomponenten in React bequem zu speichern und zu aktualisieren.
Vor- und Nachteile der Verwendung von useState
Vorteile:
1. Benutzerfreundlichkeit: Die useState-Funktion bietet eine einfache Schnittstelle zum Verwalten des Komponentenstatus. Der Anfangswert und die Funktion zum Aktualisieren des Status werden als Argumente übergeben, und der neue Status wird als Ergebnis des Aufrufs zurückgegeben.
2. Einfaches Nachverfolgen von Änderungen: useState überwacht automatisch die Statusänderungen einer Komponente und reagiert darauf, indem die entsprechenden Teile der visuellen Ansicht aktualisiert werden.
3. Flexible Statusverwaltung: Mit der useState-Funktion können Sie mehrere Zustände in einer Komponente haben, was die Organisation und Kontrolle komplexer Logik erleichtert.
4. Verwenden von Hooks: Die useState-Funktion ist einer der wichtigsten React-Hooks, mit denen Sie komplexe Logik implementieren können, ohne Klassenkomponenten zu verwenden. Dies ermöglicht eine bessere Lesbarkeit und Neuausnutzung des Codes.
Nachteile:
1. Die Verwendung von useState kann zu einer großen Anzahl von Zuständen in der Komponente führen, was das Verständnis und die Unterstützung des Codes erschweren kann.
2. Die falsche Verwendung von useState kann zu Leistungsproblemen führen, insbesondere bei der Aktualisierung einer großen Anzahl von Zuständen oder bei Verwendung komplexer Logik.
3. useState bietet keine Funktionen zur Fehlerbehandlung, daher kann eine zusätzliche Fehlerbehandlung in Ausnahmesituationen erforderlich sein.
4. Die Verwendung von useState kann für unerfahrene Entwickler schwierig zu verstehen und zu verwenden sein, besonders wenn sie gerade anfangen, React zu lernen.
