В настоящее время хуки React доступны в приложении create-response-app.

В этой статье мы попытаемся понять, что такое React Hooks и правила, которым мы должны следовать при их использовании. Кроме того, мы создадим приложение-счетчик с помощью useState React Hook.

Что такое перехватчики React?

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

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

Хуки не работают внутри классов (потому что они позволяют использовать React без классов). Используя их, мы можем полностью избежать использования методов жизненного цикла, таких как componentDidMount, componentDidUpdate, componentWillUnmount. Вместо этого мы будем использовать встроенные хуки вродеuseEffect.

Встроенные базовые хуки:

  1. Возвращает значение с отслеживанием состояния и функцию для его обновления - useState.
  2. Позволяет выполнять побочные эффекты в функциональных компонентах - useEffect
  3. Принимает объект контекста (значение, возвращаемое из React.createContext) и возвращает текущее значение контекста, предоставленное ближайшим поставщиком контекста для данного контекста - useContext

Правила крючков

Хуки - это функции JavaScript, но они накладывают два дополнительных правила:

  1. Не вызывайте ловушки внутри циклов, условий или вложенных функций - вызывайте ловушки только на верхнем уровне.
  2. Не вызывайте хуки из обычных функций JavaScript - вызывайте хуки из компонентов функции React.

Давайте посмотрим, как работает функция useState hook.

Для начала создайте новое приложение React под названием counter с помощью create-response-app.

$ npx create-react-app counter
$ cd counter
$ npm start

Теперь нам нужно создать Counter компонент и кнопку для обновления счетчика.
И установите начальное состояние (счетчик) в Counter на значение 0. И добавьте обработчик событий, чтобы при каждом нажатии кнопки count увеличивалось на 1.

Мы вызываем ловушку useState прямо внутри нашего компонента:

const [count, setCount] = useState(0); объявляет переменную состояния. Единственный аргумент useState()Hook - это начальное состояние.

useState возвращает пару значений: текущее состояние и функция, которая его обновляет. Вот почему мы пишем const [count, setCount] = useState(). Это похоже на this.state.count и this.setState в классе.

Вы можете использовать State Hook более одного раза в одном компоненте:

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}

const [count, setCount] = useState(0);
Синтаксис деструктуризации массива позволяет нам давать разные имена переменным состояния, которые мы объявили, вызвав useState. Эти имена не входят в useState API.

Здесь вы можете найти рабочий пример для React Hook useState: https://github.com/jscodelover/react-hooks

Следуйте за мной в Twitter, LinkedIn или GitHub.

Надеюсь, эта статья будет вам полезна. Спасибо за чтение и продолжайте кодировать !!