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 für den Handler-Funktionsparameter selbst. Was ist, wenn ich den Zählwert in 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>
Sie können auch im Quellcode nachsehen, wie das geht useState ist implementiert. Hier ist der Definition ab Version 16.9.
– Chemturion
13. September 19 um 19:51 Uhr
Enmanuel Durán
Haken reagieren sind ein neuer Weg (der noch entwickelt wird), um auf die Kernfunktionen von React zuzugreifen, wie z state ohne Klassen verwenden zu müssen, in Ihrem Beispiel, wenn Sie einen Zähler direkt in der Handlerfunktion erhöhen möchten, ohne ihn direkt in der anzugeben onClick prop, du könntest so etwas tun:
Lassen Sie uns kurz erklären, was in dieser Zeile vor sich geht:
const [count, setCounter] = useState(0);
useState(0) gibt ein Tupel zurück, wobei der erste Parameter count ist der aktuelle Stand des Zählers und setCounter ist die Methode, mit der wir den Status des Zählers aktualisieren können. Wir können die verwenden setCounter Methode zum Aktualisieren des Status von count irgendwo – In diesem Fall verwenden wir es innerhalb von setCount Funktion, wo wir mehr Dinge tun können; Die Idee mit Hooks ist, dass wir unseren Code funktionaler halten und vermeiden können klassenbasierte Komponenten wenn nicht gewünscht/notwendig.
aktualisieren:Haken sind kein Vorschlag mehr, seit Version 16.8 Sie können jetzt verwendet werden, es gibt einen Abschnitt auf der Website von React, der einige der Fragen beantwortet FAQ.
Gute Analogie, außer dass JavaScript technisch gesehen keinen Tupel-Datentyp hat
– goonerify
21. Januar 2020 um 21:28 Uhr
Nun, die destrukturierte Zuweisung wird wie das Tupel stackoverflow.com/a/4513061/6335029 verwendet
– Naveen DA
4. Februar 20 um 3:19 Uhr
Sind Hooks asynchron? Beim Benutzen setSomething , wenn ich sie dann versuche zu verwenden something direkt danach scheint es noch den alten wert zu haben…
– Byron Coetsee
12. April 20 um 8:40 Uhr
Hooks aktualisieren ihren Wert nach dem ‘set value’-Aufruf nicht, bis eine Komponente neu gerendert wird. Überladener useState von Hookstate (hookstate.js.org)-Bibliothek bietet Ihnen eine sofortige Wertaktualisierung und eine ganze Reihe weiterer Funktionen. Haftungsausschluss: Ich bin Autor der lib.
– Andreas
8. Mai 21 um 19:58 Uhr
Können Sie auch ansprechen, warum wir uns zusammenschließen? const in einen Zustand, der sich definitiv ändern wird? const count sieht für mich komisch aus
– Adeline
20. Mai 21 um 11:59 Uhr
useState ist einer der eingebauten Reaktionshaken, die in verfügbar sind 0.16.7 Ausführung.
useState sollten nur innerhalb von Funktionsbauteilen verwendet werden. useState ist der Weg, wenn wir einen internen Zustand benötigen und keine komplexere Logik wie Lebenszyklusmethoden implementieren müssen.
const [state, setState] = useState(initialState);
Gibt einen zustandsbehafteten Wert und eine Funktion zum Aktualisieren zurück.
Während des anfänglichen Renderns ist der zurückgegebene Zustand (state) derselbe wie der Wert, der als erstes Argument (initialState) übergeben wird.
Die setState-Funktion wird verwendet, um den Zustand zu aktualisieren. Es akzeptiert einen neuen Zustandswert und stellt ein erneutes Rendern der Komponente in die Warteschlange.
bitte beachten Sie das useState Hook-Callback zum Aktualisieren des Status verhält sich anders als Komponenten this.setState. Um Ihnen den Unterschied zu zeigen, habe ich zwei Beispiele vorbereitet.
class UserInfoClass extends React.Component {
state = { firstName: 'John', lastName: 'Doe' };
render() {
return <div>
<p>userInfo: {JSON.stringify(this.state)}</p>
<button onClick={() => this.setState({
firstName: 'Jason'
})}>Update name to Jason</button>
</div>;
}
}
// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
const [userInfo, setUserInfo] = React.useState({
firstName: 'John', lastName: 'Doe',
});
return (
<div>
<p>userInfo: {JSON.stringify(userInfo)}</p>
<button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
</div>
);
}
ReactDOM.render(
<div>
<UserInfoClass />
<UserInfoFunction />
</div>
, document.querySelector('#app'));
Neues Objekt wird erstellt, wenn setUserInfo Rückruf wird verwendet. Beachten Sie, dass wir verloren haben lastName Schlüsselwert. Um das zu beheben, könnten wir die Funktion nach innen übergeben useState.
// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
const [userInfo, setUserInfo] = React.useState({
firstName: 'John', lastName: 'Doe',
});
return (
<div>
<p>userInfo: {JSON.stringify(userInfo)}</p>
<button onClick={() => setUserInfo(prevState => ({
...prevState, firstName: 'Jason' }))}>
Update name to Jason
</button>
</div>
);
}
ReactDOM.render(
<UserInfoFunction />
, document.querySelector('#app'));
Im Gegensatz zur setState-Methode, die in Klassenkomponenten zu finden ist, führt useState Update-Objekte nicht automatisch zusammen. Sie können dieses Verhalten replizieren, indem Sie das Funktionsaktualisierungsformular mit der Objektverbreitungssyntax kombinieren:
setState(prevState => {
// Object.assign would also work
return {...prevState, ...updatedValues};
});
Vielen Dank für das Hinzufügen einer Funktion als Parameter im Beispiel.
– Juni Brosas
11. Februar 20 um 3:25 Uhr
Ihre Vergleichsbeispiele haben einem Neuling wie mir geholfen, die Verwendung von zu verstehen useState
– Einfacher Kerl
30. August 2020 um 15:20 Uhr
Jan Ciołek
Die Syntax von useState Haken ist einfach.
const [value, setValue] = useState(defaultValue)
Wenn Sie mit dieser Syntax nicht vertraut sind, gehen Sie Hier.
Ich würde dir empfehlen die zu lesen Dokumentation.Es gibt ausgezeichnete Erklärungen mit einer anständigen Menge an Beispielen.
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
// its up to you how you do it
const buttonClickHandler = e => {
// increment
// setCount(count + 1)
// decrement
// setCount(count -1)
// anything
// setCount(0)
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={buttonClickHandler}>
Click me
</button>
</div>
);
}
Dies sollte die akzeptierte Antwort sein. Prägnant und übersichtlich, mit guten externen Bezügen.
– Varun
7. Juli 20 um 11:42 Uhr
Dies ist die schlechteste Antwort, Kopieren / Einfügen der Dokumentseite im Grunde. Ich bin hierher gekommen, weil die Dokumentseite verwirrend war
– Reggaegitarre
4. Juni 21 um 22:08 Uhr
Was verwirrt Sie, mein Freund? Es ist schwer, eine bessere Erklärung zu finden als in der offiziellen Dokumentation.
– Jan Ciołek
12. Juni 21 um 16:57 Uhr
Codejockey
useState ist einer der in React v16.8.0 verfügbaren Hooks. Im Grunde können Sie Ihre ansonsten nicht zustandsbehafteten/funktionalen Komponenten in eine umwandeln, die ihren eigenen Zustand haben kann.
Auf der sehr einfachen Ebene wird es so verwendet:
const [isLoading, setLoading] = useState(true);
Damit können Sie dann anrufen setLoading einen booleschen Wert übergeben. Es ist eine coole Art, eine “zustandsbehaftete” funktionale Komponente zu haben.
useState() ist ein React-Hook. Hooks ermöglichen die Verwendung von Zustand und Mutabilität innerhalb von Funktionskomponenten.
Während Sie innerhalb von Klassen keine Hooks verwenden können, können Sie Ihre Klassenkomponente mit einer Funktionskomponente umhüllen und daraus Hooks verwenden. Dies ist ein großartiges Werkzeug zum Migrieren von Komponenten von Klassen- zu Funktionsformen. Hier ist ein vollständiges Beispiel:
Für dieses Beispiel werde ich eine Zählerkomponente verwenden. Das ist es:
Es ist eine einfache Klassenkomponente mit einem Zählzustand, und die Zustandsaktualisierung erfolgt durch Methoden. Dies ist ein sehr häufiges Muster in Klassenkomponenten. Das erste, was Sie tun müssen, ist, es mit einer Funktionskomponente mit genau demselben Namen zu umhüllen, 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 die gleiche Komponente mit dem gleichen Verhalten, dem gleichen Namen und den gleichen Eigenschaften. Lassen Sie uns nun den Zählzustand auf die Funktionskomponente heben. So läuft es:
Beachten Sie, dass die Methode inc ist immer noch da, es wird niemanden verletzen, in der Tat ist es toter Code. Das ist die Idee, heben Sie den Zustand einfach weiter an. Sobald Sie fertig sind, können Sie die Klassenkomponente entfernen:
Während dies die Verwendung von Hooks innerhalb von Klassenkomponenten ermöglicht, würde ich Ihnen dies nicht empfehlen, außer wenn Sie wie in diesem Beispiel migrieren. Das Mischen von Funktions- und Klassenkomponenten macht die Zustandsverwaltung zu einem Chaos. ich hoffe das hilft
Mit freundlichen Grüßen
useState() ist ein Beispiel für einen integrierten React-Hook, mit dem Sie Zustände in Ihren funktionalen Komponenten verwenden können. Dies war vor React 16.7 nicht möglich.
Die Funktion useState ist ein eingebauter Hook, der aus dem React-Paket importiert werden kann. Es ermöglicht Ihnen, Ihren funktionalen Komponenten einen Zustand hinzuzufügen. Mit dem useState-Hook innerhalb einer Funktionskomponente können Sie einen Zustand erstellen, ohne zu Klassenkomponenten wechseln zu müssen.
Sie können auch im Quellcode nachsehen, wie das geht
useStateist implementiert. Hier ist der Definition ab Version 16.9.– Chemturion
13. September 19 um 19:51 Uhr