React-те стейттердің реактивтілігі

Енді реактивтілік қалай жұмыс істейтінін қарастырайық. Ол стейт өзгерген кезде өзгерістер бірден экранда көрінуін қамтамасыз етеді.

Мысал арқылы қарастырайық. Бізде өнім атауы бар стейт болсын:

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

Өнім атауын версткада шығарайық:

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

Енді біздің стейтімізді өзгертетін батырма жасайық:

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

Шерту өңдегішінде setName функциясын өнімге жаңа атау орнату үшін қолданамыз:

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

Барлық кодты біріктірейік. Батырманы басқаннан кейін мәтін бірден жаңа мәнге ауысады:

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

Жеке өңдегіш функцияларды қолдану міндетті емес. Анонимдік жебе функциясын қолдануға болады:

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