Kereaktifan State dalam React

Mari kita lihat bagaimana kereaktifan berfungsi. Ia memastikan bahawa apabila state berubah, perubahan tersebut terpapar serta-merta pada skrin.

Mari kita lihat contoh. Katakan kita mempunyai state untuk nama produk:

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

Mari paparkan nama produk dalam susun atur:

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

Sekarang, mari buat butang yang apabila ditekan akan menukar state kita:

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

Dalam pengendali klik, kita gunakan fungsi setName untuk menetapkan nama baru untuk produk:

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

Mari kumpulkan semua kod kita. Hasilnya, selepas menekan butang, teks akan serta-merta bertukar kepada nilai baru:

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

Penggunaan fungsi pengendali yang berasingan tidak wajib. Anda boleh menggunakan fungsi anonym anak panah:

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

Diberi state untuk nama dan nama keluarga pengguna. Paparkan mereka dalam susun atur. Buat butang untuk menukar state-state tersebut.