Reaktiviteti i State-ve në React

Tani le të shohim se si funksionon reaktiviteti. Ai bën që kur ndryshohet state-i, ndryshimet menjëherë të shfaqen në ekran.

Le ta shohim me një shembull. Le të themi se kemi një state me emrin e produktit:

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

Le të shfaqim emrin e produktit në HTML:

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

Tani le të bëjmë një buton, upon clicking i cili do të ndryshojë state-in tonë:

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

Në përpunuesin e klikimit, ne përdorim funksionin setName, për të vendosur një emër të ri produkti:

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

Le të mbledhim të gjithë kodin tonë së bashku. Rezulton se pas klikimit në buton, teksti menjëherë do të ndryshojë në vlerën e re:

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

Përdorimi i funksioneve të veçanta përpunuese nuk është i detyrueshëm. Mund të përdorni një funksion anonim arrow:

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