Ռեակտիվություն ստեյթերի 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>;
}

Տրված են օգտագործողի անունով և ազգանունով ստեյթեր: Դրանք արտածեք վերստում: Ստեղծեք այդ ստեյթերը փոխելու կոճակներ: