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:

// ONLINE-RUNNER:browser;

//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 );

Beispiel für die Verwendung von useState in untergeordneten Komponenten

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:

// ONLINE-RUNNER:browser;

//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 );