Reaktivität von States in React

Schauen wir uns nun an, wie Reaktivität funktioniert. Sie sorgt dafür, dass bei einer Änderung des States die Änderungen sofort auf dem Bildschirm angezeigt werden.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben einen State mit dem Namen eines Produkts:

const [name, setName] = useState('prod');

Geben wir den Produktnamen im Markup aus:

return <div>
	<span>{name}</span>
</div>;

Erstellen wir nun einen Button, bei dessen Klick sich unser State ändern wird:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Im Click-Handler verwenden wir die Funktion setName, um dem Produkt einen neuen Namen zu geben:

function clickHandler() {
	setName('xxxx');
}

Fassen wir unseren gesamten Code zusammen. Das Ergebnis ist, dass nach dem Klick auf den Button der Text sofort auf den neuen Wert wechselt:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

Die Verwendung separater Handler-Funktionen ist nicht obligatorisch. Man kann eine anonyme Arrow-Funktion verwenden:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Gegeben sind States mit dem Vor- und Nachnamen eines Users. Geben Sie diese im Markup aus. Erstellen Sie Buttons zum Ändern dieser States.