Реактивии стейтҳо дар 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>;
}

Стейтҳо бо ном ва насаби корбар дода шудаанд. Онҳоро дар верстка чоп кунед. Барои тағйир додани ин стейтҳо тугмаҳо созед.