Ռեակտիվություն ստեյթերի React-ում

Եկեք հիմա տեսնենք, թե ինչպես է աշխատում ռեակտիվությունը: Այն անում է, որ ստեյթի փոփոխության դեպքում փոփոխություններն ակնթարթորեն արտացոլվում են էկրանին:

Եկեք նայենք օրինակով: Ենթադրենք՝ մենք ունենք ապրանքի անվանումով ստեյթ:

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

Ապրանքի անունը արտածենք վերստում:

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

Հիմա ստեղծենք կոճակ, որի սեղմումով մեր ստեյթը կփոխվի:

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

Սեղմման մշակչում օգտագործենք setName ֆունկցիան, որպեսզի ապրանքին տանք նոր անուն:

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

Եկեք հավաքենք մեր ամբողջ կոդը միասին: Կստացվի, որ կոճակը սեղմելուց հետո տեքստը ակնթարթորեն կփոխվի դեպի նոր արժեք:

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

Առանձին մշակիչ ֆունկցիաների օգտագործումը պարտադիր չէ: Կարելի է օգտագործել անանուն սլաքային ֆունկցիա:

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