Reactтегиндеги state реактивдүүлүгү

Келгиле, реактивдүүлүк кантип иштегенин карап көрөлү. Ал стейт өзгөргөндө, өзгөрүүлөр дароо экранда көрүнүшүн камсыз кылат.

Келгиле, мисал менен карап көрөлү. Азыр бизде продуктунун аты менен стейт бар болсун:

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>;
}