React Хуки: Уроки для новичков (с примерами)

Что такое хуки?

Хуки — это специальная технология React, позволяющая управлять состоянием и побочными эффектами в функциональных компонентах. Проще говоря, хуки позволяют автоматически выполнять действия в зависимости от изменений состояния или других событий. Изменение состояния автоматически обновляет интерфейс — это классический пример использования хуков: изменение одного элемента вызывает автоматическое изменение другого. В React существует множество хуков, но в этом уроке мы рассмотрим useState и useEffect.

Создание компонента Button

Создадим компонент Button как функцию:

const Button = (props) => {
  return (
    <button>{props.text}</button>
  );
};

Текст кнопки передаётся через props.text. Для задания значений по умолчанию используем defaultProps:

Button.defaultProps = {
  text: 'Кнопка'
};

Если свойство text не передано, используется значение по умолчанию «Кнопка».

import Button from './Button';

// ...
<Button text="Батон" />
<Button />

Результат: две кнопки — одна с надписью «Батон», другая с надписью «Кнопка».

Использование хука useState

Добавим состояние в компонент Button с помощью хука useState. Все хуки в React начинаются с use.

const [click, setClick] = useState(0);

useState(0) создаёт состояние со значением по умолчанию 0. Результат — массив: текущее значение (click) и функция для его изменения (setClick).

Добавим обработчик события, увеличивающий состояние при клике:

<button onClick={() => setClick(click + 1)}>{click}</button>

При каждом клике click увеличивается на 1, и это значение отображается на кнопке.

Использование хука useEffect

Рассмотрим хук useEffect. Он позволяет выполнять код при изменении состояния или других событий. Например, изменим заголовок страницы при изменении click:

useEffect(() => {
  document.title = `Вы нажали ${click} раз`;
});

Теперь при каждом клике заголовок страницы обновляется. useState и useEffect импортируются из react.

В этом уроке мы познакомились с хуками useState и useEffect для работы с состояниями и побочными эффектами в функциональных компонентах React. Другие хуки будут рассмотрены в последующих уроках.