Reacti olekute reaktiivsus

Vaatame nüüd, kuidas reaktiivsus töötab. See tagab, et oleku muutumisel kajastuvad muutused kohe ekraanil.

Vaatame seda näite varal. Oletame, et meil on olek toote nimega:

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

Kuvame toote nime veebilehel:

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

Loome nüüd nupu, mille vajutamisel meie olek muutub:

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

Kasutame klahvihalduris funktsiooni setName, et määrata tootele uus nimi:

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

Paneme kogu oma kood kokku. Tulemuseks on, et pärast nupu vajutamist muutub tekst kohe uueks väärtuseks:

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

Üksikute haldusfunktsioonide kasutamine ei ole kohustuslik. Võib kasutada anonüümset noolefunktsiooni:

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