React.js – это библиотека с открытым исходным кодом, основанная на JavaScript, которая предназначена для разработки пользовательских интерфейсов. Ее очень часто используют при разработке мобильных и веб-приложений.
React придерживается принципа компонентной архитектуры. Компонент в React – это изолированный фрагмент кода, который можно использовать многократно. Компоненты бывают двух типов: компоненты-классы и компоненты-функции.
До того, как вышла версия React под номером 16.8, разработчики могли обрабатывать состояния и работать с другими функциями React только с помощью компонентов-классов. Но версия 16.8 ввела новый шаблон под названием «хуки».
С помощью хуков мы можем работать с состоянием и прочими функциями React внутри компонента-функции. Таким образом, разработчики могут работать в React по принципам функционального программирования.
В этой статье мы познакомимся с основами хуков в React. За написанием этой статьи стоит один мотив: заставить новичков прийти к мысли о том, что «хуки в React – это легко как в изучение, так и в создании и использовании». И это действительно так, если вы знаете их основательно.
Прежде чем вы познакомитесь с хуками…
Прежде чем рассуждать о хуках, сначала поговрим о самых простых (иначе говоря, избитых) функциях JavaScript.
Функции в JavaScript – это логика кода, которая может использоваться многократно для выполнения повторяющихся задач. Функции можно компоновать. Это значит, что вы можете вызвать функцию внутри другой функции и использовать ее результат.
Функция someFunction() (на изображении ниже) состоит из функций a() и b(). А функция b() использует функцию c().
Компонуемость функций
Если запишем это в виде кода, то это будет выглядеть следующим образом:
function a() {
// some code { // некоторый код }
}
function c() {
// some code
}
function b() {
// some code
c();
// some code
}
function someFunction() {
// some code
a();
b();
// some code
}Ни для кого не секрет, что компоненты-функции в React – это старые добрые функции JavaScript! А значит, если функции JavaScript можно компоновать, то и с компонентами React можно делать тоже самое. Получается, что мы можем использовать (компоновать) один или несколько компонентов в другом компоненте, как показано на рисунке ниже:
Компонуемость компонентов
Компоненты с состоянием и без состояния
Компоненты в React могут фиксировать состояние, а могут не фиксировать его:
- Компонент с состоянием объявляет в нем локальное состояние и управляет им.
- Компонент без состояния – это чистая функция, у которой нет локального состояния и побочных эффектов, которыми нужно управлять.
Чистая функция – это функция, у которой нет побочных эффектов. Это значит, что такая функция всегда возвращает один и тот же результат для одного и того же набора входных данных.
Если мы исключим из компонента-функции логику, связанную с отслеживанием состояния и побочными эффектами, то получим компонент без состояния. Эта логика, в свою очередь, может быть повторно использована в каком-то другом месте в приложении. Именно поэтому вполне логичным будет отделить ее от компонента настолько, насколько это возможно.
Компонент с состоянием – компонент, у которого есть логика отслеживания состояния
Хуки React и логика отслеживания состояния
Отделить логику отслеживания состояния и побочные эффекты от компонента-функции можно с помощью хуков React. Хуки – это функции JavaScript, которые управляют тем, как ведут себя состояния, и побочными эффектами, отделяя их от компонента.
Так что, мы можем отделить всю логику отслеживания состояний, поместить ее в хуки и использовать (компоновать их, так как хуки – это те же функции) в компонентах.
Изолирование логики отслеживания состояний в хуках
Вопрос в том, что же такое логика отслеживания состояния? Это может быть что-то, что нужно объявлять локально или что требует управления переменной состояния.
Например, логика локальной переменной, отвечающая за извлечение и управление данными, фиксирует состояние. Кроме того, логику извлечения данных можно использовать повторно в других компонентах.
Так что же такое хуки React на самом деле?
Итак, как же записать определение хуков React простыми словами? Теперь, когда вы выяснили, что такое функции, компонуемость, компоненты, состояния и побочные эффекты, мы можем перейти к определению хуков React:
Хуки React – это простые функции JavaScript, которые мы можем использовать для того, чтобы отделить от компонента-функции ту часть, которую можно использовать многократно. Хуки могут фиксировать состояния и управлять побочными эффектами.
У React есть целый набор стандартных встроенных хуков:
- useState: используется для того, чтобы управлять состоянием. Возвращает значение, фиксирующее состояние, и функцию обновления, которая его обновляет.
- useEffect: используется для того, чтобы управлять побочными эффектами, например, вызовами API, подписками, таймерами, изменениями данных и т.д.
- useContext: используется для того, чтобы возвращать текущее значение окружения.
- useReducer: альтернативный вариант useState, который помогает в случае непростого управления состоянием.
- useCallback: возвращает сохраненную версию обратного вызова для того, чтобы дочерний компонент не выполнял повторную визуализацию попусту.
- useMemo: возвращает сохраненное значение, которое помогает оптимизировать производительность.
- useRef: возвращает объект ref и свойство .current. Объект ref – это изменяемый объект. Как правило, он применяется для того, чтобы получить прямой доступ к дочернему элементу.
- useLayoutEffect: запускается после того, как в DOM будут внесены все изменения. Так как useLayoutEffect запускается синхронно, лучше всего как можно чаще использовать useEffect.
- useDebugValue: помогает добавить метку к пользовательским хукам в React DevTools.
Обратите внимание, что каждое наименование хука начинается со слова use. Да-да, это обычная практика, которая используется для быстрого поиска хуков в кодовой базе React.
Кроме того, мы можем создавать свои собственные хуки, которые будут предназначены для каких-то уникальных сценариев использования, например, извлечение данных, запись информации на диск, таймеры и т.д.
Поэтому в следующий раз, когда вы наткнетесь в кодовой базе на хуки React или вас попросят написать какой-нибудь хук, не волнуйтесь. Это просто очередная функция JavaScript, которая нужна для того, чтобы вы могли работать с состоянием и побочными эффектами за пределами компонентов-функций.
