Būsenų naudojimas React

Panaudokime funkciją useState būsenai, kurioje bus produkto pavadinimas, sukurti:

const state = useState('prod');

Dėl to konstanta state bus masyvas, kurio pirmame elemente bus saugomas produkto pavadinimas, o antrame - funkcija pavadinimui pakeisti:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Dėl trumpumo paprastai nenaudojama tarpinė konstanta masyvui, o naudojama destruktūrizacija:

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

Dabar atvaizduokime mūsų būseną su produkto pavadinimu kokioje nors žymėjimo struktūroje:

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

Sujungkime viską kartu ir gausime tokį kodą:

import React, { useState } from 'react';

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

export default App;

Jei paleisite šį kodą, tai iš pradžių div elemente bus atvaizduota pradinė būsenos reikšmė, mūsų atveju 'prod'. Pakeitus būseną naudojant funkciją setName, žymėjimo struktūroje automatiškai atsiras nauja būsenos reikšmė.

Tarkime, kad norite ekrane rodyti vartotojo duomenis: jo vardą, pavardę, amžių. Sukurkite atitinkamas būsenas su pradinėmis reikšmėmis.