Совершенно очевидно, что компоненты классов не всегда являются отличной функцией в React. Чтобы решить общие проблемы, с которыми сталкиваются разработчики React при использовании классовых компонентов, в React появились React Hooks. React Hooks - это функции, которые вы можете использовать для управления состоянием и методами жизненного цикла компонентов. React Hooks позволяют:
- добавлять состояние в функциональный компонент;
- управлять жизненным циклом компонента без необходимости использовать методы жизненного цикла, такие как componentDidMount и componentWillUnmount;
- повторно использовать одну и ту же логику с состоянием в нескольких компонентах приложения.
Сначала давайте рассмотрим, как можно добавить состояние в функциональный компонент с помощью React Hooks.
Хук состояния - useState()
React предоставляет хук для управления состоянием внутри функционального компонента, который называется useState.
Давайте посмотрим, как компонент класса может быть реструктурирован в функциональный компонент с помощью хука useState. У нас есть компонент класса под названием Input, который просто отображает поле ввода. Значение input в состоянии обновляется всякий раз, когда пользователь вводит что-либо в поле ввода.
Для того чтобы использовать хук useState, нам нужно получить доступ к методу useState, который предоставляет нам React. Метод useState ожидает аргумент: это начальное значение состояния, в данном случае пустая строка.
Мы можем деструктурировать два значения из метода useState:
1) Текущее значение состояния.
2) Метод, с помощью которого мы можем обновить состояние.
Первое значение можно сравнить с параметром this.state.[value] компонента класса. Второе значение можно сравнить с методом this.setState компонента класса.
Поскольку мы имеем дело со значением входа, назовем текущее значение состояния input, а метод для обновления состояния setInput. Начальным значением должна быть пустая строка.
Теперь мы можем рефакторить компонент класса Input в функциональный компонент с состоянием.
Значение поля ввода равно текущему значению состояния ввода, как и в примере с компонентом класса. Когда пользователь вводит текст в поле ввода, значение состояния ввода обновляется соответствующим образом с помощью метода setInput.
Хук жизненного цикла компонента - useEffect()
Мы видели, что с помощью компонента useState можно обрабатывать состояние внутри функционального компонента, но еще одним преимуществом компонентов класса является возможность добавления методов жизненного цикла в компонент.
С помощью хука useEffect мы можем "подключиться" к жизненному циклу компонента. Хук useEffect эффективно объединяет методы жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount.
Давайте воспользуемся примером ввода, который мы использовали в разделе Хук состояния. Всякий раз, когда пользователь вводит что-либо в поле ввода, мы также хотим записывать это значение в консоль.
Для этого нам нужно использовать хук useEffect, который "слушает" значение ввода. Мы можем сделать это, добавив input в массив зависимостей хука useEffect. Массив зависимостей - это второй аргумент, который получает хук useEffect.
Теперь значение ввода записывается в консоль каждый раз, когда пользователь вводит значение.
Кастомные хуки
Помимо встроенных хуков, которые предоставляет React (useState, useEffect, useReducer, useRef, useContext, useMemo, useImperativeHandle, useLayoutEffect, useDebugValue, useCallback), мы можем легко создавать свои собственные хуки.
Вы, наверное, заметили, что все хуки начинаются с use. Важно начинать хуки с use, чтобы React проверял, не нарушает ли он правила Hooks.
Допустим, мы хотим отслеживать определенные клавиши, которые пользователь может нажимать при вводе. Наш пользовательский хук должен иметь возможность принимать в качестве аргумента клавишу, которую мы хотим отслеживать.
Мы хотим добавить слушатель событий keydown и keyup для клавиши, которую пользователь передал в качестве аргумента. Если пользователь нажал эту кнопку, то есть сработало событие keydown, состояние внутри хука должно переключиться на true. В противном случае, когда пользователь перестает нажимать на эту кнопку, срабатывает событие keyup и состояние переключается на false.
Отлично! Мы можем использовать этот пользовательский хук в нашем приложении ввода. Давайте выводить журнал в консоль каждый раз, когда пользователь нажимает клавишу q, l или w.
Вместо того чтобы держать логику нажатия клавиш локально в компоненте Input, мы можем повторно использовать хук useKeyPress в нескольких компонентах, не переписывая одну и ту же логику снова и снова.
Еще одно большое преимущество хуков заключается в том, что сообщество может создавать хуки и делиться ими. Мы просто написали хук useKeyPress сами, но на самом деле в этом не было никакой необходимости! Хук уже был создан кем-то другим и готов к использованию в нашем приложении, стоит нам только установить его!
Вот несколько сайтов, на которых перечислены все хуки, созданные сообществом и готовые к использованию в вашем приложении.
Дополнительное руководство по использованию хуков
Как и в других компонентах, существуют специальные функции, которые используются, когда вы хотите добавить Hooks в написанный вами код. Вот краткий обзор некоторых распространенных функций Hook:
useState
Хук useState позволяет разработчикам обновлять состояние и манипулировать им внутри функциональных компонентов без необходимости преобразовывать его в компонент класса. Одним из преимуществ этого хука является то, что он прост и не требует такой сложности, как другие хуки React.
useEffect
Хук useEffect используется для запуска кода во время основных событий жизненного цикла функционального компонента. В основном теле функционального компонента не допускаются мутации, подписки, таймеры, логирование и другие побочные эффекты. Если их разрешить, это может привести к запутанным ошибкам и несоответствиям в пользовательском интерфейсе. Хук useEffect предотвращает все эти "побочные эффекты" и позволяет пользовательскому интерфейсу работать без сбоев. Он представляет собой комбинацию компонентов componentDidMount , componentDidUpdate и componentWillUnmount, собранных в одном месте.
useContext
Хук useContext принимает объект контекста, который является значением, возвращаемым из React.createcontext, и возвращает текущее значение контекста для этого контекста. Хук useContext также работает с React Context API, чтобы обмениваться данными по всему приложению без необходимости передавать реквизиты приложения вниз через различные уровни.
Следует отметить, что аргументом, передаваемым хуку useContext, должен быть сам объект контекста, и любой компонент, вызывающий useContext, всегда выполняет повторный рендеринг при изменении значения контекста.
useReducer
Хук useReducer является альтернативой setState и особенно предпочтителен, когда у вас сложная логика состояний, включающая несколько подзначений, или когда следующее состояние зависит от предыдущего. Он принимает на вход функцию редуктора и начальное состояние, а на выходе возвращает текущее состояние и функцию диспетчеризации с помощью деструктуризации массива. useReducer также оптимизирует производительность компонентов, которые запускают глубокие обновления.
Плюсы
Меньше строк кода
Hooks позволяет группировать код по задачам и функциональности, а не по жизненному циклу. Это делает код не только чище и лаконичнее, но и короче. Ниже приведено сравнение простого компонента с состоянием, представляющего собой таблицу данных о товарах с возможностью поиска, использующего React, и того, как он выглядит в Hooks после использования ключевого слова useState.
Тот же компонент с использованием хуков
Упрощает сложные компоненты
Классы JavaScript могут быть сложны в управлении, их трудно использовать при горячей перезагрузке и они могут не минифицироваться. React Hooks решает эти проблемы и обеспечивает простоту функционального программирования. С внедрением Hooks нам не нужны компоненты классов.
Повторное использование логики с учетом состояния
Классы в JavaScript поощряют многоуровневое наследование, которое быстро увеличивает общую сложность и вероятность ошибок. Однако Hooks позволяют использовать состояние и другие возможности React без написания классов. С помощью React вы всегда можете повторно использовать логику с состоянием без необходимости переписывать код снова и снова. Это снижает вероятность ошибок и позволяет использовать композицию с обычными функциями.
Совместное использование невизуальной логики
До внедрения Hooks в React не было возможности извлекать и совместно использовать невизуальную логику. В итоге это привело к появлению таких сложностей, как паттерны HOC и реквизиты Render, только для того, чтобы решить общую проблему. Но внедрение Hooks решило эту проблему, так как позволяет извлекать логику с состоянием в простую функцию JavaScript.
Конечно, есть и потенциальные минусы Hooks, о которых стоит помнить:
- Приходится соблюдать его правила, без плагина linter трудно понять, какое правило было нарушено.
- Требуется значительное время на тренировку для правильного использования (Exp: useEffect).
- Будьте внимательны к неправильному использованию (Exp: useCallback, useMemo).
Ссылки на наши ресурсы – ниже: