React-daky stazlaryň reaktivligi

Indi reaktivligiň nähili işleýändigine seredeliň. Ol staz üýtgedilende, üýtgeşmeler derrew ekranda görkezilýär.

Mysal bilen seredeliň. Bizde harydyň ady bilen bir staz bolsun:

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

Harydyň adyny sahypalaýyşda görkezeliň:

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

Indi basylanda biziň stazymyzyň üýtgejek düwmesini düzeliň:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>düwme</button>
</div>;

Basylma işleýjisinde setName funksiýasyny ulanyp, haryda täze ad belgileris:

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

Kodymyzyň hemmesini bilelikde jemläýliň. Netijede, düwmä basanyňyzdan soň tekst derrew täze baha üýtgär:

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

Aýratyn işleýji funksiýalary ulanmak hökmany däl. Atlandyrylmadyk ok funksiýasy hem ulanylyp bilner:

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

Ulanyjynyň ady we familiýasy bilen stazlar berlen. Olary sahypalaýyşda görkeziň. Bu stazlary üýtgetmek üçin düwmeler düzüň.