Reactda state-larning reaktivligi

Keling endi reaktivlik qanday ishlashini ko'ramiz. U state o'zgarganda o'zgarishlar zahotiyoq ekranda aks etishini ta'minlaydi.

Keling bir misol orqali ko'ramiz. Faraz qilaylik, bizda mahsulot nomi bilan state mavjud:

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

Keling mahsulot nomini veb-sahifada chiqaramiz:

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

Keling endi bosilganda bizning state'imiz o'zgaradigan tugma yarataylik:

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

Klik qayta ishlovchisida setName funksiyasidan foydalanamiz, mahsulotga yangi nom berish uchun:

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

Keling barcha kodimizni birlashtiramiz. Tugma bosilgandan keyin matn darhol yangi qiymatga o'zgaradi:

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

Alohida qayta ishlovchi funksiyalardan foydalanish shart emas. Anonim o'q funksiyasidan foydalanish mumkin:

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

Foydalanuvchi ismi va familiyasi bilan state-lar berilgan. Ularni veb-sahifada chiqaring. Ushbu state-larni o'zgartirish uchun tugmalar yarating.