Реактивность стейтов в React
Давайте теперь посмотрим, как работает реактивность. Она делает так, что при изменении стейта изменения мгновенно отображаются на экране.
Давайте посмотрим на примере. Пусть у нас есть стейт с названием продукта:
const [name, setName] = useState('prod');
Выведем название продукта в верстке:
return <div>
<span>{name}</span>
</div>;
Сделаем теперь кнопку, по нажатию на которую наш стейт будет изменяться:
return <div>
<span>{name}</span>
<button onClick={clickHandler}>btn</button>
</div>;
В обработчике клика используем функцию setName,
чтобы установить продукту новое название:
function clickHandler() {
setName('xxxx');
}
Соберем весь наш код вместе. Получится, что после нажатия на кнопку текст мгновенно поменяется на новое значение:
function App() {
const [name, setName] = useState('prod');
function clickHandler() {
setName('xxxx');
}
return <div>
<span>{name}</span>
<button onClick={clickHandler}>btn</button>
</div>;
}
Использование отдельных функций-обработчиков не обязательно. Можно использовать анонимную стрелочную функцию:
function App() {
const [name, setName] = useState('prod');
return <div>
<span>{name}</span>
<button onClick={() => setName('xxxx')}>btn</button>
</div>;
}
Даны стейты с именем и фамилией юзера. Выведите их в верстке. Сделайте кнопки для изменения этих стейтов.