С помощью хука useState можно создать локальное состояние внутри функционального компонента. Раньше это было доступно только компонентам-классам.
import React from 'react';
// создаем переменную для хранения состояния
// используя деструктуризацию массива
// синтаксис: const [stateVariable] = React.useState(defaultValue);
function App() {
const [language] = React.useState('javascript');
return <div>I am learning {language}</div>;
}
Примечание: все хуки, рассматриваемые в этом разделе, можно отдельно импортировать из пакета react.
import React, { useState } from "react";
function App() {
const [language] = useState("javascript");
return <div>I am learning {language}</div>;
}
Разумеется, созданное состояние можно обновить, иначе не имело бы смысла его создавать. Для этого используются функции-сеттеры:
function App() {
// сеттер идет вторым параметром в деструктурируемом массиве
// для именования используется префикс set + имя переменной в PascalCase
const [language, setLanguage] = React.useState("python");
return (
<div>
<button onClick={() => setLanguage("javascript")}>
Change language to JS
</button>
<p>I am now learning {language}</p>
</div>
);
}
Чтобы обновить состояние, мы просто передаем в сеттер его новое значение.
Обратите внимание, в качестве обработчика события используется стрелочная функция.
Внутри одного компонента хук useState можно использовать несколько раз:
function App() {
const [language, setLanguage] = React.useState("python");
const [yearsExperience, setYearsExperience] = React.useState(0);
return (
<div>
<button onClick={() => setLanguage("javascript")}>
Change language to JS
</button>
<input
type="number"
value={yearsExperience}
onChange={event => setYearsExperience(event.target.value)}
/>
<p>I am now learning {language}</p>
<p>I have {yearsExperience} years of experience</p>
</div>
);
}
В useState в качестве состояния можно передать примитивное значение или даже объект.
Если обновление зависит от предыдущего состояния, то в сеттер можно передать не объект, а функцию. Первым параметром она получит текущий state, а вернуть должна новый.
function App() {
const [developer, setDeveloper] = React.useState({
language: "",
yearsExperience: 0,
isEmployed: false
});
function handleToggleEmployment(event) {
// передаем в сеттер функцию
// в качестве параметра получаем текущее состояние
// возвращаем обновленное состояние
setDeveloper(prevState => {
return { ...prevState, isEmployed: !prevState.isEmployed };
});
}
return (
<button onClick={handleToggleEmployment}>Toggle Employment Status</button>
);
}