Reactда стейтлар реактивлиги

Ҳозир реактивлик қандай ишлашини кўрамиз. У стейт ўзгарганида ўзгартиришлар дарҳол экранда кўринишини таъминлайди.

Келиб, мисолда кўрамиз. Фарз қилайлик, бизда маҳсулот номи билан стейт бор:

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

Маҳсулот номини версткада чиқарамиз:

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

Энди бизнинг стейтимизни ўзгартирадиган бир тугма ясаймиз:

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

Клик обработчигида setName функциясидан фойдаланамиз, маҳсулотга янги ном бериш учун:

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

Барча кодимизни бирга яғамиз. Натижада тугма босиллиши билан матноз дарҳол янги қийматга ўзгариши келиб чиқади:

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

Алохида функция-обработчиклардан фойдаланиш шарт эмас. Номаълум стрелочна функциядан фойдаланиш мумкин:

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

Фойдаланувчининг исми ва фамиляси билан стейтлар берилган. Уларни версткада чиқаринг. Ушбу стейтларни ўзгартириш учун тугмалар ясанг.