Reaktivita stavů v React

Pojďme se nyní podívat, jak funguje reaktivita. Zajišťuje, že při změně stavu se změny okamžitě zobrazí na obrazovce.

Podívejme se na příklad. Předpokládejme, že máme stav s názvem produktu:

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

Vypišme název produktu ve verstu:

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

Vytvořme nyní tlačítko, po jehož kliknutí se náš stav změní:

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

V obsluze kliknutí použijeme funkci setName, abychom nastavili produktu nový název:

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

Spojme celý náš kód dohromady. Výsledkem bude, že po stisknutí tlačítka se text okamžitě změní na novou hodnotu:

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

Používání samostatných obslužných funkcí není povinné. Lze použít anonymní šipkovou funkci:

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