Stāvokļu reaktivitāte React

Tagad aplūkosim, kā darbojas reaktivitāte. Tā nodrošina, ka, mainoties stāvoklim, izmaiņas acumirklī tiek atspoguļotas ekrānā.

Aplūkosim to ar piemēru. Pieņemsim, ka mums ir stāvoklis ar produkta nosaukumu:

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

Izvadīsim produkta nosaukumu izkārtojumā:

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

Izveidosim pogu, kuras nospiešanas reizē mūsu stāvoklis tiks mainīts:

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

Klikšķa apstrādātājā izmantosim funkciju setName, lai iestatītu produktam jaunu nosaukumu:

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

Apvienosim visu mūsu kodu kopā. Izrādīsies, ka pēc pogas nospiešanas teksts acumirklī tiks nomainīts pret jauno vērtību:

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

Atsevišķu apstrādātājfunkciju izmantošana nav obligāta. Var izmantot anonīmu arrow funkciju:

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