React-də State-lərin Reaktivliyi

Gəlin indi reaktivliyin necə işlədiyinə baxaq. O elə edir ki, state dəyişdikdə dəyişikliklər dərhal ekranda əks olunur.

Gəlin bir nümunəyə baxaq. Tutaq ki, məhsulun adı ilə bağlı bir state-imiz var:

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

Gəlin məhsulun adını veb səhifədə çıxaraq:

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

Gəlin indi kliklədikdə state-imizi dəyişəcək bir düymə edək:

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

Klik işləyicisində, məhsula yeni ad təyin etmək üçün setName funksiyasından istifadə edək:

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

Gəlin bütün kodumuzu birlikdə yığaq. Belə çıxır ki, düyməyə basdıqdan sonra mətn dərhal yeni dəyərlə dəyişəcək:

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

Ayrı işləyici funksiyalardan istifadə etmək məcburi deyil. Anonim ox funksiyasından da istifadə edə bilərsiniz:

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

İstifadəçinin adı və soyadı ilə bağlı state-lər verilmişdir. Onları veb səhifədə çıxarın. Bu state-ləri dəyişdirmək üçün düymələr edin.