Реакция и хук состояния

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

Основное использование

Как было сказано в предыдущем посте, хуки реакции — это функции. И вы используете их как один. Вы вызываете их с одним параметром, начальным состоянием. В результате вы получаете текущее значение и функцию для его обновления. Я назвал свою функцию setCounter. Но имя функции может быть любым. Рекомендуется предварить его набором. И это имеет смысл, поскольку вы устанавливаете новое значение с помощью этой функции.

Пример: компонент счетчика, значение которого увеличивается при нажатии:

import {useState} from ‘react’;
 
function State() {
  const [counter, setCounter] = useState(0);
 
  return (
    <div>
      <div>{counter}</div>
      <div>
        <button onClick={() => setCounter(counter + 1)}>
          Increment
        </button>
      </div>
    </div>
  )
}

Несколько состояний

В приведенном выше примере используется одно состояние, значение счетчика. Но может быть несколько значений. Может быть, пользовательское значение шага, чтобы вы не увеличивали его каждый раз на единицу. Для этого достаточно снова вызвать useState и получить новую пару значения и функции. Это отличный пример того, как использование хуков улучшает ваш код. При использовании компонентов класса вам нужно будет использовать весь объект состояния, если вы хотите обновить только одну часть.

Пример, компонент счетчика с пользовательским значением приращения:

import {useState} from 'react';
function CustomStepCounter() {
  const [counter, setCounter] = useState(0);
  const [stepValue, setStepValue] = useState(1);
  return (
    <div>
      <div>{counter}</div>
      <div>Step value: 
        <input type="text" 
          onChange={ev => setStepValue(parseInt(ev.target.value))}/>
      </div>
      <div>
        <button 
          onClick={() => setCounter(counter + stepValue)}>
          Increment
        </button>
      </div>
    </div>
  )
}

Отложенная инициализация

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

import {useState} from 'react';
function LazyCounter() {
  const [counter, setCounter] = useState(() => {
    // this could be any value
    return 0;
  });
  return (
    <div>
      <div>{counter}</div>
      <div>
        <button onClick={() => setCounter(counter + 1)}>
              Increment
        </button>
      </div>
    </div>
  )
}

Вы можете найти код из этого поста в моем репозитории GitHub.

Чтобы узнать больше, вы можете подписаться на меня в Twitter, LinkedIn, GitHub или Instagram.