React'ta State Reactivite

Şimdi reactivitenin nasıl çalıştığına bakalım. Reactivite, state değiştiğinde bu değişikliklerin anında ekrana yansımasını sağlar.

Bir örnekle inceleyelim. Ürün adı için bir state'imiz olsun:

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

Ürün adını HTML çıktısında gösterelim:

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

Şimdi, tıklandığında state'imizi değiştirecek bir buton yapalım:

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

Tıklama işleyicisinde, ürüne yeni bir ad vermek için setName fonksiyonunu kullanacağız:

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

Tüm kodumuzu bir araya getirelim. Butona tıklandıktan sonra metnin anında yeni değere değiştiğini göreceğiz:

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

Ayrı işleyici fonksiyonlar kullanmak zorunlu değildir. Anonim bir ok fonksiyonu da kullanılabilir:

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