Использование useState для управления состоянием

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

Пример основного использования:

import React, { useState } from 'react';



function Counter() {

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



  return (

    <div>

      <p>Текущее значение: {count}</p>

      <button onClick={() => setCount(count + 1)}>Увеличить</button>

      <button onClick={() => setCount(count - 1)}>Уменьшить</button>

    </div>

  );

}

В этом примере useState(0) инициализирует состояние со значением 0. Функция setCount позволяет изменять это значение.

Понимание начальных значений и обновления состояния

useState принимает один аргумент — начальное значение состояния. Оно может быть числом, строкой, объектом или другим типом данных. Важно помнить, что при обновлении состояния React не объединяет новое значение с предыдущим, как это делает setState в классовых компонентах. Вместо этого вы полностью заменяете текущее значение.

Пример работы с объектом:

import React, { useState } from 'react';



function UserInfo() {

  const [user, setUser] = useState({ name: 'Алекс', age: 25 });



  const updateName = () => {

    setUser({ ...user, name: 'Иван' });

  };



  return (

    <div>

      <p>Имя: {user.name}</p>

      <p>Возраст: {user.age}</p>

      <button onClick={updateName}>Обновить имя</button>

    </div>

  );

}

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

Управление сложным состоянием

Если ваш компонент работает с более сложным состоянием, например массивом, useState может эффективно справляться и с этим.

Пример работы с массивами:

import React, { useState } from 'react';



function ItemList() {

  const [items, setItems] = useState(['Яблоко', 'Банан', 'Вишня']);



  const addItem = () => {

    setItems([...items, 'Апельсин']);

  };



  return (

    <div>

      <ul>

        {items.map((item, index) => (

          <li key={index}>{item}</li>

        ))}

      </ul>

      <button onClick={addItem}>Добавить Апельсин</button>

    </div>

  );

}

В этом случае мы используем метод map для рендеринга элементов и оператор расширения для добавления новых значений.

Управление состоянием с функцией обновления

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

Пример использования функции обновления:

import React, { useState } from 'react';



function ClickCounter() {

  const [clicks, setClicks] = useState(0);



  const handleClick = () => {

    setClicks(prevClicks => prevClicks + 1);

  };



  return (

    <div>

      <p>Количество кликов: {clicks}</p>

      <button onClick={handleClick}>Кликни меня</button>

    </div>

  );

}

Использование функции обновления (prevClicks => prevClicks + 1) гарантирует корректное обновление, особенно когда состояние обновляется асинхронно.