Reactiviteit van states in React

Laten we nu bekijken hoe reactiviteit werkt. Het zorgt ervoor dat bij het wijzigen van de state de veranderingen onmiddellijk worden weergegeven op het scherm.

Laten we een voorbeeld bekijken. Stel we hebben een state met de naam van een product:

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

Laten we de productnaam weergeven in de opmaak:

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

Laten we nu een knop maken, waarop bij het klikken onze state wordt gewijzigd:

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

In de klikhandler gebruiken we de functie setName, om een nieuwe naam voor het product in te stellen:

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

Laten we al onze code samenvoegen. Het resultaat is dat na het klikken op de knop de tekst onmiddellijk verandert naar de nieuwe waarde:

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

Het gebruik van aparte handlerfuncties is niet verplicht. Je kunt een anonieme pijlfunctie gebruiken:

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

Er zijn states gegeven met de voornaam en achternaam van een gebruiker. Geef ze weer in de opmaak. Maak knoppen om deze states te wijzigen.