React - useState - Verwendungsbeispiele
In diesem Artikel wird ein einfaches Beispiel gezeigt, wie man useState-Hook in einer Funktionskomponente in React verwenden.
Das folgende Beispiel zeigt, wie man einen einfachen Zähler erstellen kann, der bei jedem Anklicken von button inkrementiert wird.
In der App-Komponente erstellt man einen useState-Hook, der den Zustand der Komponente in dem Zähler speichert. Es ist sehr wichtig, Hooks am Anfang von Komponenten zu verwenden (vor return) - Das ist die Hauptregel in React.
Um den Zähler zu aktualisieren, verwendet man die Funktion setCounter, und übergibt man counter + 1 als neuen Zustand - das rendert die App-Komponente mit dem neuen Zustand.
Lauffähiges Beispiel:
xxxxxxxxxx//Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.//import React from 'react';const App = () => { const [counter, setCounter] = React.useState(0); return ( <div> <div>Zähler: {counter}</div> <button onClick={() => setCounter(counter + 1)}>1 hinzufügen</button> </div> );};const root = document.querySelector('#root');ReactDOM.render(<App />, root );Es ist auch möglich, den Zustand innerhalb verschachtelter Komponenten zu erhalten. Das funktionert auf die gleiche Art und Weise - es erfordert die Funktion useState().
Wie das funktionert sieht man im folgenden Beispiel:
xxxxxxxxxx//Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.//import React from 'react';const ChildComponent = () => { const [counter, setCounter] = React.useState(0); return ( <div> <span>[ChildComponent] Zähler: {counter}</span>{' '} <button onClick={() => setCounter(counter + 1)}>1 hinzufügen</button> </div> );};const App = () => { const [counter, setCounter] = React.useState(0); return ( <div> <div> <span>[App] Zähler: {counter}</span>{' '} <button onClick={() => setCounter(counter + 1)}>1 hinzufügen</button> </div> <ChildComponent /> </div> );};const root = document.querySelector('#root');ReactDOM.render(<App />, root );