Реактивност на състоянията в React

Нека сега да видим как работи реактивността. Тя прави така, че при промяна на състоянието промените мигновено се отразяват на екрана.

Нека разгледаме пример. Да предположим, че имаме състояние с име на продукт:

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

Нека изведем името на продукта в HTML-а:

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>;
}