В последнее время я немного больше возвращаюсь к React. Пока я на работе, в свободное время я занимаюсь кодом, а также помогаю другим с их кодом. В последнее время я заметил, что все больше и больше людей используют хуки. Когда я изучал React, у нас их не было, и приходилось прибегать к this.setState() внутри callback-функции. Итак, сегодня мы рассмотрим, что делает хук, как работает его синтаксис и где мы его используем.
handleClick = () => { this.setState({ color: this.props.color }) }
Выше приведен пример того, как мы используем функцию обратного вызова в React. В этой функции обратного вызова handleClick мы устанавливаем состояние чего-то, возможно, div, когда на него нажимают, и используем встроенный метод setState. Обычно это все еще приемлемый метод в программировании. Однако есть несколько неудач.
- Вы должны инициализировать состояние через функцию-конструктор.
- Затем вам нужно обработать функцию обратного вызова
- И вы можете использовать этот метод только в компоненте класса в React.
Теперь давайте посмотрим, как мы можем настроить хук в React.
import React, {useState} from 'react'; function Counter(){ const [count, setCount] = useState(0) return( <div> <p>You Clicked the button {count} times!</p> <button onClick={() => setCount(count + 1)}> Click Me! </button> </div> ) }
В ПОРЯДКЕ! Итак, давайте разберем это…
- Итак, сразу же мы импортируем useState из библиотеки React, что позволяет нам использовать хук в целом.
- Затем посредством деструктурирования мы устанавливаем переменную count и передаем метод setCount, аналогичный this.setState(), а затем устанавливаем состояние в 0 при каждом рендеринге.
- Затем для кнопки мы передаем функцию onClick, так что, когда пользователь нажимает кнопку, мы увеличиваем значение состояния count на 1 и используем эту функцию setCount в анонимной функции обратного вызова.
- Затем мы через JSX интерполируем значение count на странице для отображения текущего состояния.
Итак, изначально первое, что вы должны заметить, это отсутствие компонента класса, он уже более легкий, поэтому функциональные компоненты берут верх в React. Затем мы используем useState для установки нашего хука, а не функции конструктора, и нам не нужно настраивать объект для инициализации состояния. Тогда нам не нужно явно отображать(). Поскольку мы используем функциональный компонент, мы можем просто вернуть JSX, а React сделает все остальное за нас.
Мы уже видим преимущества использования useState и хуков. Наш код намного меньше кода компонента класса, что упрощает поиск и отладку кода. В общем, я бы сказал, узнайте, как this.setState работает для нас в компонентах класса, прежде чем прыгать прямо в хуки. Хуки могут показаться волшебными, но по сути они делают то же самое в this.setState, только с меньшим количеством кода.
Надеюсь, вам понравился этот обзор структуры хуков в React. Есть еще много, много, много примеров того, как мы можем использовать хуки. Это просто царапает поверхность на данный момент. Я видел крючки, от которых кружилась голова! Так что продолжайте тренироваться!!