Stāvokļu reaktivitāte React

Tagad aplūkosim, kā darbojas reaktivitāte. Tā nodrošina, ka, mainoties stāvoklim, izmaiņas acumirklī tiek atspoguļotas ekrānā.

Aplūkosim to ar piemēru. Pieņemsim, ka mums ir stāvoklis ar produkta nosaukumu:

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

Izvadīsim produkta nosaukumu izkārtojumā:

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

Izveidosim pogu, kuras nospiešanas reizē mūsu stāvoklis tiks mainīts:

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

Klikšķa apstrādātājā izmantosim funkciju setName, lai iestatītu produktam jaunu nosaukumu:

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

Apvienosim visu mūsu kodu kopā. Izrādīsies, ka pēc pogas nospiešanas teksts acumirklī tiks nomainīts pret jauno vērtību:

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

Atsevišķu apstrādātājfunkciju izmantošana nav obligāta. Var izmantot anonīmu arrow funkciju:

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

Doti stāvokļi ar lietotāja vārdu un uzvārdu. Izvadiet tos izkārtojumā. Izveidojiet pogas šo stāvokļu mainīšanai.