Būsenų reaktyvumas React

Dabar pažiūrėkime, kaip veikia reaktyvumas. Jis užtikrina, kad pakeitus būseną, pakeitimai akimirksniu atsispindi ekrane.

Pažiūrėkime pavyzdžiu. Tarkime, kad turime būseną su produkto pavadinimu:

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

Atvaizduokime produkto pavadinimą išoriniame puslapio dizaine:

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

Dabar sukurkime mygtuką, kurį paspaudus mūsų būsena pasikeis:

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

Paspaudimo apdoroklyje naudokime funkciją setName, kad nustatytume produktui naują pavadinimą:

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

Sujungkime visą mūsų kodą kartu. Pasirodo, kad po mygtuko paspaudimo tekstas akimirksniu pasikeis į naują reikšmę:

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

Atskirų apdorojimo funkcijų naudojimas nėra privalomas. Galima naudoti anoniminę rodyklinę funkciją:

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

Duotos vartotojo vardo ir pavardės būsenos. Atvaizduokite juos išoriniame puslapio dizaine. Sukurkite mygtukus šių būsenų pakeitimui.