Օգտագործելով սթեյթերը React-ում

Օգտվենք useState ֆունկցիայից արտադրանքի անունը պարունակող սթեյթ ստեղծելու համար.

const state = useState('prod');

Արդյունքում state հաստատունը կներկայացնի զանգված, որի առաջին տարրում կպահվի արտադրանքի անունը, իսկ երկրորդում՝ այն փոխելու ֆունկցիան.

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

Համառոտության համար սովորաբար չեն օգտագործում միջանկյալ հաստատուն զանգվածի համար, այլ օգտագործում են դեստրուկտուրիզացիա.

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

Եկեք այժմ ցուցադրենք մեր արտադրանքի անուն պարունակող սթեյթը ինչ-որ վերստում.

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

Եկեք հավաքենք ամենը միասին և ստացենք հետևյալ կոդը.

import React, { useState } from 'react';

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

export default App;

Եթե գործարկեք այս կոդը, ապա սկզբում div-ում կցուցադրվի սթեյթի սկզբնական արժեքը, մեր դեպքում 'prod'։ Սթեյթը setName ֆունկցիայի միջոցով փոխելիս վերստում ավտոմատ կհայտնվի սթեյթի նոր արժեքը։

Ենթադրենք, որ ցանկանում եք էկրանին ցուցադրել օգտագործողի տվյալները՝ նրա անունը, ազգանունը, տարիքը։ Դրա համար ստեղծեք համապատասխան սթեյթեր՝ սկզբնական արժեքներով։