Ich lerne gerade das Hooks-Konzept in React und versuche, das folgende Beispiel zu verstehen.
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Das obige Beispiel erhöht den Zähler im Handlerfunktionsparameter selbst. Was ist, wenn ich den Zählwert innerhalb der Ereignishandlerfunktion ändern möchte?
Betrachten Sie das folgende Beispiel
setCount = () => {
//how can I modify count value here. Not sure if I can use setState to modify its value
//also I want to modify other state values as well here. How can I do that
}
<button onClick={() => setCount()}>
Click me
</button>
javascript
reactjs
react-native
react-hooks
Hemadri Dasari
quelle
quelle
useState
die Implementierung erfolgt. Hier ist die Definition ab Version 16.9 .Antworten:
React Hooks sind eine neue (noch in der Entwicklung befindliche) Möglichkeit, auf die Kernfunktionen von React zuzugreifen, z. B.
state
ohne Klassen verwenden zu müssen. In Ihrem Beispiel möchten Sie einen Zähler direkt in der Handler-Funktion erhöhen, ohne ihn direkt in deronClick
Requisite anzugeben könnte so etwas tun wie:und onClick:
Lassen Sie uns kurz erklären, was in dieser Zeile vor sich geht:
useState(0)
Gibt ein Tupel zurück, bei dem der erste Parametercount
der aktuelle Status des Zählers ist undsetCounter
die Methode ist, mit der wir den Status des Zählers aktualisieren können. Wir können diesetCounter
Methode verwenden, um den Status voncount
überall zu aktualisieren. In diesem Fall verwenden wir sie innerhalb dersetCount
Funktion, in der wir mehr tun können. Die Idee mit Hooks ist, dass wir unseren Code funktionsfähiger halten und klassenbasierte Komponenten vermeiden können wenn dies nicht gewünscht / benötigt wird.Ich schrieb einen kompletten Artikel über Haken mit mehreren Beispielen (einschließlich Zähler) wie diese codepen , benutzte ich
useState
,useEffect
,useContext
und individuelle Haken . Ich könnte näher auf die Funktionsweise von Hooks bei dieser Antwort eingehen, aber die Dokumentation erklärt den Status-Hook sehr gut und andere Hooks im Detail. hoffe, es hilft.Update: Hooks sind nicht länger ein Vorschlag , ab Version 16.8 sie jetzt verfügbar sind verwendet werden, gibt es einen Abschnitt in React Website , dass die Antworten einige der FAQ .
quelle
setSomething
ich es dannsomething
direkt danach versuche , scheint es immer noch den alten Wert zu haben ...useState
ist einer der eingebauten Reaktionshaken, die in verfügbar sind0.16.7
Version .useState
sollte nur innerhalb von Funktionskomponenten verwendet werden.useState
Dies ist der Weg, wenn wir einen internen Zustand benötigen und keine komplexere Logik wie Lebenszyklusmethoden implementieren müssen.Bitte beachten Sie, dass sich der
useState
Hook-Rückruf zum Aktualisieren des Status anders verhält als Komponententhis.setState
. Um Ihnen den Unterschied zu zeigen, habe ich zwei Beispiele vorbereitet.Neues Objekt wird erstellt, wenn
setUserInfo
Rückruf verwendet wird. Beachten Sie, dass wir denlastName
Schlüsselwert verloren haben. Um das zu beheben, konnten wir die Funktion im Inneren übergebenuseState
.Siehe Beispiel:
Weitere Informationen finden
useState
Sie in der offiziellen Dokumentation .quelle
Die Syntax von
useState
hook ist unkompliziert.const [value, setValue] = useState(defaultValue)
Wenn Sie mit dieser Syntax nicht vertraut sind, klicken Sie hier .
Ich würde Ihnen empfehlen, die Dokumentation zu lesen. Es gibt ausgezeichnete Erklärungen mit einer anständigen Anzahl von Beispielen.
quelle
useState
ist einer der in React v16.8.0 verfügbaren Hooks. Grundsätzlich können Sie Ihre ansonsten nicht zustandsbehafteten / funktionalen Komponenten in eine Komponente umwandeln, die einen eigenen Zustand haben kann.Im Grunde wird es folgendermaßen verwendet:
Auf diese Weise können Sie die
setLoading
Übergabe eines booleschen Werts aufrufen . Es ist eine coole Art, eine "zustandsbehaftete" Funktionskomponente zu haben.quelle
useState()
ist ein React Hook. Hooks ermöglichen die Verwendung von Status und Veränderlichkeit innerhalb von Funktionskomponenten.Während Sie keine Hooks in Klassen verwenden können, können Sie Ihre Klassenkomponente mit einer Funktion eins umschließen und Hooks daraus verwenden. Dies ist ein großartiges Tool zum Migrieren von Komponenten von der Klasse in die Funktionsform. Hier ist ein vollständiges Beispiel:
In diesem Beispiel werde ich eine Zählerkomponente verwenden. Das ist es:
Es ist eine einfache Klassenkomponente mit einem Zählstatus, und die Statusaktualisierung erfolgt über Methoden. Dies ist ein sehr häufiges Muster in Klassenkomponenten. Das erste ist, es mit einer Funktionskomponente mit demselben Namen zu umschließen, die alle ihre Eigenschaften an die umschlossene Komponente delegiert. Außerdem müssen Sie die umschlossene Komponente in der Funktionsrückgabe rendern. Hier ist es:
Dies ist genau dieselbe Komponente mit demselben Verhalten, demselben Namen und denselben Eigenschaften. Heben wir nun den Zählzustand auf die Funktionskomponente. So läuft es:
Beachten Sie, dass die Methode
inc
immer noch vorhanden ist und niemanden verletzt. Tatsächlich handelt es sich um toten Code. Dies ist die Idee, einfach den Zustand weiter anzuheben. Wenn Sie fertig sind, können Sie die Klassenkomponente entfernen:Dies ermöglicht zwar die Verwendung von Hooks in Klassenkomponenten, ich würde Ihnen dies jedoch nicht empfehlen, es sei denn, Sie migrieren wie in diesem Beispiel. Das Mischen von Funktions- und Klassenkomponenten macht die Zustandsverwaltung zu einem Chaos. ich hoffe das hilft
Freundliche Grüße
quelle
useState () ist ein integrierter Beispiel-React-Hook, mit dem Sie Zustände in Ihren Funktionskomponenten verwenden können. Dies war vor Reaktion 16.7 nicht möglich.
Die useState-Funktion ist ein integrierter Hook, der aus dem Reaktionspaket importiert werden kann. Sie können Ihren Funktionskomponenten den Status hinzufügen. Mit dem useState-Hook in einer Funktionskomponente können Sie einen Status erstellen, ohne zu Klassenkomponenten zu wechseln.
quelle
Haken sind eine neue Funktion in
React v16.7.0-alpha
useState
der "Haken".useState()
Legen Sie den Standardwert einer beliebigen Variablen fest und verwalten Sie diese in der Funktionskomponente (PureComponent-Funktionen).ex : const [count, setCount] = useState(0);
Setzen Sie den Standardwert von count 0. und u kannsetCount
toincrement
oderdecrement
den Wert verwenden.onClick={() => setCount(count + 1)}
Erhöhen Sie den Zählwert. DOCquelle
Danke Loelsonk, ich habe es getan
quelle
useState ist ein Hook, mit dem Sie einer Funktionskomponente den Status hinzufügen können. Es akzeptiert ein Argument, das der Anfangswert der State-Eigenschaft ist, und gibt den aktuellen Wert der State-Eigenschaft sowie eine Methode zurück, mit der diese State-Eigenschaft aktualisiert werden kann.
Das Folgende ist ein einfaches Beispiel:
import React, {useState} from react
function HookCounter {
const [count, stateCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count} </button>
</div>
)
}
useState akzeptiert den Anfangswert der Statusvariablen, der in diesem Fall Null ist, und gibt ein Wertepaar zurück. Der aktuelle Wert des Status wurde als count bezeichnet, und eine Methode zum Aktualisieren der Statusvariablen wurde als setCount aufgerufen.
quelle