Reaktiwiteit van state in React

Laat ons nou kyk hoe reaktiewe funksionaliteit werk. Dit sorg daarvoor dat wanneer state verander, die wysigings onmiddellik op die skerm vertoon word.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n state wat die naam van 'n produk bevat:

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

Laat ons die produknaam in die opmaak uitvoer:

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

Kom ons maak nou 'n knoppie wat, wanneer dit gedruk word, ons state sal verander:

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

In die klikhantering gebruik ons die funksie setName om 'n nuwe naam vir die produk te stel:

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

Kom ons voeg al ons kode bymekaar. Die gevolg sal wees dat na die knoppie gedruk is, die teks onmiddellik sal verander na die nuwe waarde:

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

Die gebruik van aparte hanteringsfunksies is nie verpligtend nie. 'n Anonieme pylfunksie kan gebruik word:

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

Gegee state met die voornaam en van van 'n gebruiker. Vertoon dit in die opmaak. Maak knoppies om hierdie state te verander.