Состояния в React JS — это свойства, значения которых можно изменять во время работы приложения без перезагрузки страницы и изменения кода.
Что такое состояние?
В отличие от обычных свойств, состояние позволяет динамически обновлять элементы на сайте. Например, задать красный цвет фона свойством — это статическое значение: при загрузке страницы фон будет красным, и изменить его можно только перезагрузив страницу и изменив код. Состояние же позволяет менять цвет фона (и любые другие значения) во время работы приложения. Это особенно полезно для списков дел, форм и интерактивных элементов.
Создание и использование состояния
Рассмотрим пример с checkbox: при его нажатии значение будет меняться. Для этого нам нужно состояние, например, isChecked.
Компонент React:
class ReactComponent extends React.Component {
constructor(props) {
super(props);
this.state = { isChecked: true }; // Инициализация состояния
}
render() {
let message;
if (this.state.isChecked) {
message = 'Выбрано';
} else {
message = 'Не выбрано';
}
return (
<div>
<input type="checkbox" defaultChecked={this.state.isChecked} onChange={this.handleCheckChange} />
<p>Checkbox: {message}</p>
</div>
);
}
handleCheckChange = () => {
this.setState({ isChecked: !this.state.isChecked });
};
}
В constructor инициализируется состояние isChecked с помощью this.state = { isChecked: true }. Функция render выводит сообщение, зависящее от значения isChecked.
Обработка событий
Обработчик событий onChange: onChange={this.handleCheckChange} реагирует на изменение состояния checkbox. Функция handleCheckChange меняет значение состояния isChecked на противоположное с помощью this.setState({ isChecked: !this.state.isChecked }). Метод setState автоматически перерисовывает компонент.
Преимущества использования состояния в React
В React изменение состояния автоматически перерисовывает компонент, упрощая разработку интерактивных интерфейсов. В отличие от других библиотек, нет необходимости вручную обновлять DOM.
Состояния в React — мощный инструмент для создания динамических и интерактивных веб-приложений. Они позволяют легко обновлять интерфейс в ответ на действия пользователя без перезагрузки страницы или сложного управления DOM. Мы рассмотрели базовые принципы работы с состояниями: создание, изменение и обработку событий.