React-daky stazlaryň reaktivligi

Indi reaktivligiň nähili işleýändigine seredeliň. Ol staz üýtgedilende, üýtgeşmeler derrew ekranda görkezilýär.

Mysal bilen seredeliň. Bizde harydyň ady bilen bir staz bolsun:

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

Harydyň adyny sahypalaýyşda görkezeliň:

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

Indi basylanda biziň stazymyzyň üýtgejek düwmesini düzeliň:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>düwme</button>
</div>;

Basylma işleýjisinde setName funksiýasyny ulanyp, haryda täze ad belgileris:

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

Kodymyzyň hemmesini bilelikde jemläýliň. Netijede, düwmä basanyňyzdan soň tekst derrew täze baha üýtgär:

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

Aýratyn işleýji funksiýalary ulanmak hökmany däl. Atlandyrylmadyk ok funksiýasy hem ulanylyp bilner:

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