Reactтегиндеги state реактивдүүлүгү

Келгиле, реактивдүүлүк кантип иштегенин карап көрөлү. Ал стейт өзгөргөндө, өзгөрүүлөр дароо экранда көрүнүшүн камсыз кылат.

Келгиле, мисал менен карап көрөлү. Азыр бизде продуктунун аты менен стейт бар болсун:

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>;
}

Колдонуучунун аты жана фамилиясы бар стейттер берилген. Аларды версткада көрсөткүлө. Бул стейттерди өзгөртүү үчүн баскычтарды түзгүлө.