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

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

jsxconst state = useState('prod');

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

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

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

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

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

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

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

jsximport React, { useState } from 'react';

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

export default App;

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