React Hooks — что это и почему классы больше не нужны?
В прошлом году React получил глобальное нововведение — hooks, или «хуки». Что это, как ими пользоваться, что будет дальше с React — рассказывает наш фронтенд-разработчик Юрий Громов.
Проблемы классов — причина появления Hooks
Начнём с того, почему React решил отказаться от классовых компонентов.
Во-первых, классы становятся нечитаемыми: они разрастаются и часто хранят разную логику в одном месте. Например, в componentDidMount() можно и задавать стиль для какого-то элемента, и подключаться к сокету, и менять title страницы. И всё это — в одном методе жизненного цикла.
Во-вторых, приходится дополнительно тратить время на оптимизацию классов: проводить рефакторинг, декомпозировать, менять структуру не только конкретного компонента, но и всех связанных с ним. Когда у функционального компонента появляется потребность в методе жизненного цикла, приходится переписывать его на классовый.
В-третьих, использование компонентов высшего порядка усложняет кодовую базу, приходится встраивать их в проект и проводить рефакторинг функционала..
Кстати говоря, классы в React не то чтобы классы — скорее функции. Если вы работали с классами в Java или C#, то знаете, чем классы в этих языках отличаются от классов в React: наследованием, инкапсуляцией и т.д. Всего этого нет у классов React, есть только ключевое слово this и методы.
Что такое хуки?
А зачем нам вообще нужны классы в React? Обычно затем, чтобы работать с локальными состояниями и методами жизненного цикла. Хуки позволяют работать с ними сразу — без написания классов.
Например, хук useState отвечает за состояние. Рассмотрим пример его использования.
const [name, setName] = useState(‘’)
При монтировании компонента в переменной name будет храниться пустая строка, а с помощью функции setName можно изменить это значение. Вызываем setName(‘Андрей’) — и переменная name становится равна ‘Андрей’.
Хук эффекта useEffect отвечает за методы жизненного цикла. В компоненте их может быть несколько, поэтому можно распределить логику в его разные части. Например, можно вызвать 3 хука, аналогичных методу componentDidMount().
Однако самое важное — можно создавать собственные хуки. Это позволяет избежать компонентов высшего порядка. К примеру, вы можете написать хук useAuth: в нём происходит обработка данных и определяется, авторизованы ли вы на сайте. После этого нужно вызвать useAuth внутри компонента, присвоить результат какой-то переменной — и можете дальше спокойно использовать это значение.
Стоит ли переходить с классов на хуки сейчас?
На хуки переходить стоит, хотя бы потому что это уже сделали многие важные крупные библиотеки. Например, React Redux уже имеет useSelector и useDispatch. Этим он здорово облегчил головную боль при работе с ним. Теперь подключаться к хранилищу Redux можно всего одной строчкой, вместо обёртки в виде connect и функций mapStateToProps и mapDispatchToProps.
Что будет с классами?
Классы не исчезнут, как заявляет React. Но, скорее всего, прекратится их поддержка.
Если у вас есть готовые проекты, то при переходе на новую версию React они не должны сломаться. Кроме того, если вы поддерживаете готовые проекты, то можете по ходу переписывать классовые компоненты на функциональные. Классы отлично уживаются с хуками в одном проекте. Есть лишь одно правило — нельзя использовать хук внутри класса.
В целом, React-сообщество довольно появлением хуков. Поэтому, скорее всего, мы будем наблюдать их активное развитие и замещение классов.
