Когда мы говорим о современных веб-приложениях, мы почти всегда подразумеваем, что они должны быть интерактивными. Кнопка, которая изменяет текст, переключатель темы, счётчик – всё это примеры интерфейсов, которые реагируют на действия пользователя. В React за это отвечает состояние. Давайте разберёмся, что это такое, как с ним работать и как избежать распространённых ошибок.

Что такое состояние (state) в React?

Состояние – это данные, которые принадлежат конкретному компоненту и могут меняться с течением времени. В отличие от пропсов, которые компонент получает извне и не может изменять, состояние полностью управляется самим компонентом.

Представьте кнопку «Лайк», которая показывает, нажата она или нет. Это её состояние. Когда пользователь кликает на кнопку, состояние меняется, а React автоматически обновляет интерфейс, чтобы отобразить новое состояние.

Важные особенности состояния:

• Локальность: Состояние компонента доступно только внутри него.
• Изменяемость через React: Вы не можете менять состояние напрямую (например, state = newValue). Это делается через специальные методы.

Как управлять состоянием с помощью useState

С появлением хуков управление состоянием стало проще, чем когда-либо. Хук useState позволяет добавлять состояние в функциональные компоненты. Вот как он работает:

Шаг 1: Импортируем useState

Сначала нужно подключить хук из React:

import React, { useState } from 'react';

Шаг 2: Инициализируем состояние

useState возвращает массив из двух элементов:

1. Значение состояния – текущее состояние.
2. Функция для обновления состояния.

Пример:

const [liked, setLiked] = useState(false);

liked – текущее состояние (по умолчанию false).
setLiked – функция, которая обновляет liked.

Шаг 3: Меняем состояние

Чтобы обновить состояние, вызывайте функцию, передавая новое значение:

setLiked(true);

Пример: управляем состоянием

Вот простой компонент, который изменяет текст кнопки при клике:

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? 'Нравится' : 'Не нравится'}
    </button>
  );
}

Рекомендации по минимизации состояния

Хотя состояние — это мощный инструмент, важно использовать его с умом. Вот несколько советов:

Минимизируйте количество состояний

Не храните данные в состоянии, если их можно вычислить. Например, если вы уже храните список товаров, не создавайте отдельное состояние для количества товаров — просто используйте list.length.

Держите состояние там, где оно нужно

Состояние должно принадлежать самому близкому компоненту, который его использует. Если данные нужны нескольким компонентам, подумайте о поднятии состояния на уровень выше.

Не смешивайте несвязанные данные

Если у вас есть состояние для отслеживания, например, имени пользователя и статуса авторизации, лучше разделить их:

const [username, setUsername] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);

Избегайте глубоких вложений

Если состояние становится слишком сложным (например, объект с несколькими уровнями вложенности), подумайте о разделении на несколько состояний.

Практика: кнопка «Лайк»

Теперь давайте сделаем практическое упражнение — создадим компонент, который меняет текст кнопки на «Нравится» или «Не нравится» по клику.

Шаг 1: Создаём компонент

В проекте откройте файл App.jsx и добавьте следующий код:

import React, { useState } from 'react';

function LikeButton() {
  // Инициализируем состояние
  const [liked, setLiked] = useState(false);

  // Обработчик клика
  const handleClick = () => {
    setLiked(!liked); // Меняем состояние на противоположное
  };

  return (
    <button onClick={handleClick}>
      {liked ? 'Нравится' : 'Не нравится'}
    </button>
  );
}

function App() {
  return (
    <div>
      <h1>Пример с кнопкой "Лайк"</h1>
      <LikeButton />
    </div>
  );
}

export default App;

Шаг 2: Запускаем приложение

В терминале запустите команду:

npm run dev

Откройте приложение в браузере. Вы увидите кнопку с текстом «Не нравится». Нажмите на неё, и текст изменится на «Нравится». Поздравляю, вы только что сделали ваш компонент интерактивным! 🎉

Разбираем код

• useState(false): Состояние liked инициализируется со значением false (по умолчанию кнопка отображает «Не нравится»).
• setLiked(!liked): При клике состояние переключается на противоположное: true или false.
• {liked ? ‘Нравится’ : ‘Не нравится’}: С помощью тернарного оператора компонент отображает текст в зависимости от текущего состояния.

Дополнительное задание: добавляем стиль

Чтобы сделать кнопку интереснее, добавьте стили, которые меняются в зависимости от состояния:

function LikeButton() {
  const [liked, setLiked] = useState(false);

  const handleClick = () => {
    setLiked(!liked);
  };

  const buttonStyle = {
    backgroundColor: liked ? 'green' : 'gray',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return (
    <button onClick={handleClick} style={buttonStyle}>
      {liked ? 'Нравится' : 'Не нравится'}
    </button>
  );
}

Теперь кнопка меняет цвет: зелёный для «Нравится» и серый для «Не нравится».

Итоги

Состояние в React — это фундаментальный инструмент для создания интерактивных интерфейсов. Сегодня вы узнали:

• Что такое состояние и как оно отличается от пропсов.
• Как использовать useState для добавления и изменения состояния.
• Основные рекомендации по минимизации и управлению состоянием.

Мы также создали интерактивную кнопку «Лайк», которая меняет текст и стиль по клику. В следующей статье мы поговорим о событиях в React и узнаем, как взаимодействовать с пользователем ещё более гибко.