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

Теория

Понимание концепции состояния в React

Функциональные компоненты в React также могут иметь свое собственное состояние с использованием хука useState. Этот хук предоставляет функциональным компонентам возможность управлять состоянием, без необходимости создавать классы.

Пример:

import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={incrementCount}>Увеличить</button>
    </div>
  );
}

export default Counter;

В этом примере функциональный компонент Counter использует хук useState для создания и управления состоянием переменной count. Когда пользователь нажимает кнопку «Увеличить», вызывается функция incrementCount, которая обновляет состояние с помощью setCount, что приводит к перерисовке компонента и обновлению отображаемого счетчика.

Подробнее про хук useState

Хук (hook) в React — это функция, которая позволяет вам «зацепиться» (hook into) во внутренние состояния и функциональность React компонентов. Хуки позволяют функциональным компонентам использовать состояние (state) и другие функциональности, которые ранее были доступны только классовым компонентам.

useState — это один из встроенных хуков (hooks) в React, который используется для добавления локального состояния (state) в функциональные компоненты. Он позволяет компонентам сохранять и изменять свое внутреннее состояние, что делает их более интерактивными и динамичными.

Хук useState объявляется с помощью деструктивного присваивания. Он принимает начальное значение состояния в качестве аргумента и возвращает массив из двух элементов: текущего состояния и функции для его обновления. Общая форма объявления выглядит так:

const [state, setState] = useState(initialState);

• state: Это переменная, в которой хранится текущее состояние компонента. Вы можете использовать ее для чтения текущего состояния в компоненте.
• setState: Это функция, которая используется для обновления состояния компонента. Вы вызываете эту функцию с новым значением, и React обновит состояние компонента и запустит перерисовку компонента.

Что делает useState:

1. Инициализация состояния: При первом рендере компонента useState устанавливает начальное значение состояния, которое вы передаете ему в качестве аргумента initialState. Это происходит только при первом рендере компонента, и значение сохраняется между рендерами.
2. Возвращение текущего состояния и функции для его обновления: useState возвращает текущее значение состояния (переменную state) и функцию (переменную setState), которую вы вызываете для обновления состояния.
3. Обновление состояния: При вызове setState с новым значением, React обновляет состояние компонента и запускает перерисовку компонента, чтобы отобразить новое состояние на экране.

Практика

Теперь давайте рассмотрим практический пример использования хука useState в создании простого приложения Todo List (список дел) в React. Todo List — это классическое приложение, которое позволяет пользователям создавать, удалять и отмечать задачи как выполненные.

Создаем компонент TodoApp

Мы создадим компонент TodoApp, который будет содержать список задач и форму для добавления новых задач. Мы будем использовать состояние для хранения списка задач и текущего ввода пользователя.

import React, { useState } from 'react';

function TodoApp() {
  // Используем хук useState для создания состояния
  const [tasks, setTasks] = useState([]);
  const [inputText, setInputText] = useState('');

  // Функция для добавления новой задачи в список
  const addTask = () => {
    if (inputText.trim() !== '') {
      setTasks([...tasks, { text: inputText, completed: false }]);
      setInputText(''); // Очищаем поле ввода
    }
  };

  // Функция для отметки задачи как выполненной
  const toggleTask = (index) => {
    const updatedTasks = [...tasks];
    updatedTasks[index].completed = !updatedTasks[index].completed;
    setTasks(updatedTasks);
  };

  // Функция для удаления задачи
  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          placeholder="Добавить задачу"
        />
        <button onClick={addTask}>Добавить</button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            <span
              style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTask(index)}
            >
              {task.text}
            </span>
            <button onClick={() => deleteTask(index)}>Удалить</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

Здесь основные шаги:

1. Мы используем useState для создания начальных состояний tasks и inputText.
2. Функция addTask добавляет новую задачу в список только в том случае, если поле ввода не пустое. Мы также очищаем поле ввода после добавления задачи.
3. Функция toggleTask переключает статус выполнения задачи при клике на нее.
4. Функция deleteTask удаляет задачу из списка.
5. Мы рендерим список задач и обновляем их состояние, когда пользователь взаимодействует с приложением.