img

Хуки в React: основы для начинающих

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, которая нужна для того, чтобы вы могли работать с состоянием и побочными эффектами за пределами компонентов-функций. 

Ссылка
скопирована
Программирование
Скидка 25%
Фронтенд-разработчик с нуля
Погрузитесь в мир веб-разработки, освоив основные инструменты работы: HTML, CSS, JavaScript. Научитесь работать с дизайн-макетами и адаптивной версткой, сверстаете свои первые страницы и поймете, как строить карьерный трек в ИТ.
Получи бесплатный
вводный урок!
Пожалуйста, укажите корректный e-mail
отправили вводный урок на твой e-mail!
Получи все материалы в telegram и ускорь обучение!
img
Еще по теме:
img
  Больше всего WebSocket-серверы подходят для коммуникационных соединений реального времени, так как они обходят ограничения
img
  Python – это один из самых популярных языков программирования, предназначенных для управления и анализа данных. Одна из его си
img
  В этой статье мы поговорим с вами о том, что такое отладка, как отлаживать код и как можно оптимизировать данный процесс.
img
Подмодули Git – это способ добавления одного репозитория Git в качестве подкаталога другого репозитория. Такая вложенная структу
img
  Отслеживание версий программного обеспечения – довольно сложная задача, и Git помогает с ней справиться. С помощью теговой сис
img
  Переменные CSS – это пользовательские переменные, которые вы можете создавать самостоятельно и использовать многократно в
Комментарии
ЛЕТНИЕ СКИДКИ
40%
50%
60%
До конца акции: 30 дней 24 : 59 : 59