Reacti olekute reaktiivsus

Vaatame nüüd, kuidas reaktiivsus töötab. See tagab, et oleku muutumisel kajastuvad muutused kohe ekraanil.

Vaatame seda näite varal. Oletame, et meil on olek toote nimega:

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

Kuvame toote nime veebilehel:

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

Loome nüüd nupu, mille vajutamisel meie olek muutub:

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

Kasutame klahvihalduris funktsiooni setName, et määrata tootele uus nimi:

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

Paneme kogu oma kood kokku. Tulemuseks on, et pärast nupu vajutamist muutub tekst kohe uueks väärtuseks:

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

Üksikute haldusfunktsioonide kasutamine ei ole kohustuslik. Võib kasutada anonüümset noolefunktsiooni:

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

Antud on kasutaja ees- ja perekonnanime olekud. Kuva need veebilehel. Loo nende olekute muutmiseks nupud.