Управление состоянием в React: Создание счетчика с помощью хука useState

Введение

В React "состояние" (state) относится к данным, которые могут изменяться со временем внутри компонента. Когда состояние компонента изменяется, React автоматически перерисовывает компонент, чтобы отразить новое состояние. Хуки (Hooks) — это функции, которые позволяют вам "подключаться" к состоянию React и функциям жизненного цикла из функциональных компонентов.

В этой лабораторной работе вы научитесь использовать один из самых фундаментальных хуков, useState, для управления состоянием в функциональном компоненте React. Мы создадим простое приложение-счетчик, чтобы продемонстрировать, как инициализировать, отображать и обновлять состояние в ответ на взаимодействие пользователя.

Импортируйте useState из react в файл компонента

Сначала подготовим нашу среду разработки. Скрипт настройки уже создал для вас новый проект React в директории ~/project/my-app с использованием Vite.

Ваша первая задача — установить необходимые зависимости и запустить сервер разработки. Откройте терминал в WebIDE и выполните следующие команды поочередно.

Перейдите в директорию вашего проекта:

cd my-app

Установите зависимости проекта:

npm install

Запустите сервер разработки:

npm run dev -- --host 0.0.0.0 --port 8080

После выполнения последней команды вы увидите вывод, указывающий, что сервер запущен. Теперь вы можете просмотреть ваше работающее приложение, нажав на вкладку "Web 8080" в интерфейсе LabEx. На протяжении всей этой лабораторной работы мы будем изменять файл ~/project/my-app/src/App.jsx.

На этом этапе мы начнем с импорта хука useState из библиотеки React. Хуки — это специальные функции, и чтобы использовать их, вы должны сначала импортировать их из пакета react.

Используя файловый менеджер в WebIDE, перейдите и откройте файл ~/project/my-app/src/App.jsx.

Сначала очистим содержимое по умолчанию, чтобы иметь минимальную отправную точку. Замените все содержимое App.jsx следующим кодом:

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Теперь добавьте оператор импорта в самом начале файла, чтобы сделать хук useState доступным в нашем компоненте.

import { useState } from "react";

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Эта строка сообщает JavaScript, что мы хотим использовать функцию useState, которая является именованным экспортом из библиотеки 'react'.

Инициализируйте состояние с помощью const [count, setCount] = useState(0)

На этом этапе мы вызовем хук useState для создания нового состояния в нашем компоненте.

Функция useState принимает один аргумент: начальное значение состояния. Она возвращает массив, содержащий два элемента:

Текущее значение состояния.
Функция, которая позволяет обновлять состояние.

Мы используем синтаксис, называемый "деструктуризацией массива", чтобы получить эти два значения в отдельные переменные. Общепринято называть эти переменные [something, setSomething].

Внутри функции компонента App, перед оператором return, добавьте следующую строку для инициализации нашего состояния. Мы назовем переменную состояния count и установим ее начальное значение равным 0.

Обновите ваш файл ~/project/my-app/src/App.jsx следующим кодом:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Теперь наш компонент имеет состояние с именем count, которое инициализировано значением 0, и функцию setCount, которую мы можем использовать для изменения его значения позже.

Отобразите значение состояния в JSX с помощью {count}

На этом этапе мы отобразим текущее значение нашей переменной состояния count в пользовательском интерфейсе.

В JSX вы можете встраивать любое допустимое выражение JavaScript непосредственно в разметку, заключая его в фигурные скобки {}. Это позволяет нам отображать динамические данные, такие как наша переменная состояния.

Добавим тег параграфа <p> для отображения сообщения, включающего текущее значение count.

Измените JSX внутри оператора return в файле ~/project/my-app/src/App.jsx:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

После сохранения файла переключитесь на вкладку "Web 8080". Вы должны увидеть текст "The current count is: 0", отображаемый на странице, что подтверждает правильное рендеринг начального значения состояния.

Обновите состояние с помощью setCount(count + 1)

На этом этапе мы определим логику обновления нашего состояния. Важно помнить, что вы никогда не должны изменять состояние напрямую (например, count = count + 1). Вместо этого вы всегда должны использовать функцию установки состояния, предоставляемую useState, которая в нашем случае является setCount.

Вызов функции установки состояния сообщает React, что состояние изменилось. Затем React запланирует повторный рендеринг компонента с новым значением состояния.

Давайте создадим простую функцию внутри нашего компонента App, которая будет обрабатывать логику увеличения счетчика. Мы назовем эту функцию incrementCount.

Добавьте функцию incrementCount в ваш файл ~/project/my-app/src/App.jsx:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Эта функция при вызове возьмет текущее значение count, прибавит к нему 1, а затем передаст новое значение в setCount. Это вызовет повторный рендеринг компонента App.

Запустите обновление при событии клика по кнопке

На заключительном этапе мы свяжем нашу логику обновления состояния с действием пользователя. Мы добавим кнопку в наш компонент, и когда пользователь нажмет на нее, мы вызовем функцию incrementCount, созданную на предыдущем шаге.

В React вы можете обрабатывать события, такие как клики, предоставляя функцию специальным атрибутам, например onClick.

Давайте добавим элемент <button> в наш JSX и установим его обработчик onClick на нашу функцию incrementCount.

Обновите ваш файл ~/project/my-app/src/App.jsx с финальным кодом:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
      <button
    </>
  );
}

export default App;

Обратите внимание, что мы передаем саму функцию (incrementCount) в onClick, а не результат ее вызова (incrementCount()). React вызовет эту функцию за нас всякий раз, когда кнопка будет нажата.

Теперь перейдите на вкладку "Web 8080". Вы должны увидеть кнопку "Increment". Нажмите на нее и наблюдайте, как счетчик на экране увеличивается с каждым кликом!

React counter app showing increment button

Резюме

Поздравляем! Вы успешно создали React-компонент с состоянием, используя хук useState.

В этой лабораторной работе вы изучили основные принципы управления состоянием в современном React:

Что такое "состояние" (state) в React-компоненте и почему оно необходимо для создания интерактивных пользовательских интерфейсов (UI).
Как импортировать хук useState из библиотеки react.
Как инициализировать часть состояния, вызвав useState с начальным значением.
Как использовать деструктуризацию массива для получения переменной состояния и функции установки состояния.
Как отображать переменную состояния в вашем JSX, используя фигурные скобки {}.
Как обновлять состояние в ответ на действие пользователя (например, клик по кнопке), вызывая функцию установки состояния.

Понимание хука useState — это критически важный первый шаг к освоению React. Теперь вы можете использовать этот шаблон для добавления динамического, интерактивного поведения в ваши собственные React-компоненты.

Состояние React с использованием хуков