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

Пайдаланушының аты мен тегі бар стейттер берілген. Оларды версткада шығарыңыз. Осы стейттерді өзгерту үшін батырмалар жасаңыз.