Что такое хуки?
Хуки, новое дополнение к React 16.8.0, — это функции, которые позволяют вам «подключаться» к состоянию React и функциям жизненного цикла из функциональных компонентов. До появления хуков состояние и жизненные циклы React можно было использовать только в компонентах класса, поэтому хуки позволяют разработчикам подключаться к состоянию React, не создавая ни одного компонента класса. Поскольку хуки — это обычные функции Javascript, вы можете использовать встроенные хуки и/или создавать свои собственные пользовательские хуки.
Что послужило причиной выпуска хуков?
- Сложно повторно использовать логику с отслеживанием состояния между компонентами.
С помощью хуков вы можете повторно использовать логику между своими компонентами, не изменяя их архитектуру или структуру.
- Сложные компоненты становятся трудными для понимания.
Когда компоненты становятся слишком большими и выполняют множество операций, их становится сложно понять. Хуки решают эту проблему, позволяя вам разделить один компонент на более мелкие функции в зависимости от того, какие части этого отдельного компонента связаны между собой.
- Классы сбивают с толку и людей, и машины.
Классы могут быть большим препятствием для изучения React, вам нужно понимать, как this
работает в JavaScript, что сильно отличается от того, как это работает в большинстве языков. React Hooks решает эту проблему, позволяя разработчикам использовать лучшие функции React без использования классов.
Правила хуков
- Вызывайте хуки только на верхнем уровне. Не вызывайте хуки внутри циклов, условий или вложенных функций.
- Используйте хуки только внутри React Functions. Не вызывайте хуки из обычных функций JavaScript.
Основные крючки
В React 16.8.0 есть 10 встроенных хуков, но основные, наиболее часто используемые хуки включают в себя:
- использовать состояние()
- использоватьЭффект()
- использоватьконтекст()
Дополнительные крючки
Это варианты основных хуков, которые используются только в определенных случаях.
- использовать редьюсер()
- использовать обратный вызов()
- использоватьMemo()
- использоватьСсылка()
- использовать императивхэндл()
- использоватьмакетэффект()
- использоватьDebugValue()
useState()
Самый важный и полезный крючок. В React состояние — это динамические данные в вашем компоненте: они меняются со временем, когда пользователи взаимодействуют с вашим приложением. Он предоставляет нам способ поддерживать и обновлять информацию внутри компонента, не требуя, чтобы его родитель каким-либо образом отправлял обновленную информацию. useState позволяет разработчикам React обновлять, обрабатывать и манипулировать состоянием внутри функциональных компонентов.
На изображении выше мы говорим React создать какое-то новое внутреннее состояние для нашего компонента с начальным значением 0. useState вернет массив, внутри которого есть две переменные:
- age: ссылка на текущее значение этого состояния во внутренних компонентах React.
- setAge: функция setter, чтобы мы могли обновить это состояние.
useEffect()
Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты — это такие вещи, как выборка данных, настройка подписки и ручное изменение DOM в компонентах React. По умолчанию useEffect выполняется в основном после завершения рендеринга и запускается после каждого рендеринга. Хук useEffect принимает два аргумента:
useEffect (обратный вызов [, зависимости]);
- обратный вызов — это функция, содержащая логику побочного эффекта, которая выполняется сразу после того, как изменения были отправлены в DOM.
- dependencies — это необязательный массив зависимостей. useEffect выполняет обратный вызов, только если зависимости изменились между рендерингами.
Зависимости:
- useEffect( () =› {} ): Нет массива зависимостей. Побочный эффект запускается после каждого рендеринга.
- useEffect( () =› {}, [] ): пустой массив зависимостей. Побочный эффект запускается один раз после первоначального рендеринга.
- useEffect( () => {}, [var1, var2] ): Массив зависимостей с элементами в нем. Побочный эффект запускается только при изменении любого значения зависимости.
Логика побочного эффекта переходит в функцию обратного вызова. Аргумент зависимостей используется для управления тем, когда вы хотите, чтобы побочный эффект выполнялся.
использоватьконтекст()
Этот хук — способ глобального управления состоянием. Он принимает объект контекста, то есть значение, которое возвращается из React.createContext, а затем возвращает текущее значение контекста для этого контекста. Текущее значение контекста определяется значением свойства ближайшего ‹MyContext.Provider› над вызывающим компонентом в дереве. Этот хук работает с React Context API, который позволяет глубоко обмениваться данными в вашем приложении без необходимости вручную передавать реквизиты вашего приложения через различные уровни. Примечание: аргументом useContext должен быть сам объект контекста.
useReducer()
Альтернатива useState. Хук useReducer предпочтительнее для обработки сложной логики состояния, которая включает в себя несколько подзначений или когда следующее состояние зависит от предыдущего. Он принимает функцию редуктора, а также ввод начального состояния. Затем он возвращает текущее состояние в паре с методом отправки.
useCallback()
Этот хук вернет запомненную версию обратного вызова, которая изменится только в том случае, если изменилась одна из зависимостей. Это используется для предотвращения повторного рендеринга компонента, если его свойства не изменились.
запоминание: кэширование значения, чтобы его не нужно было пересчитывать.
useMemo()
Этот хук возвращает запомненное значение, вы можете передать функцию «создать», а также массив зависимостей. Возвращаемое им значение будет снова использовать запомненное значение только в том случае, если одна из зависимостей в дереве зависимостей изменится. Помните, что этот хук запускается во время рендеринга, поэтому что-то вроде побочных эффектов не попадет в этот хук.
Хуки useCallback и useMemo похожи. Разница в том, что useMemo возвращает запомненное значение, а useCallback возвращает запомненную функцию.
useRef()
Этот хук возвращает изменяемый объект ref, чье свойство .current инициализируется переданным аргументом (initialValue). Возвращенный объект будет доступен в течение всего срока службы компонента. По сути, этот хук позволяет сохранять значения между рендерами и может использоваться для хранения изменяемого значения, которое не вызывает повторного рендеринга при обновлении.
useImperativeHandle()
Редко вам понадобится использовать этот хук, он используется для настройки значения экземпляра, которое становится доступным для родительских компонентов при использовании ref в React.
useLayoutEffect()
Однако, как и хук useEffect, он срабатывает синхронно после всех мутаций DOM. Это означает, что React будет ждать завершения функции, прежде чем обновлять экран для клиента. Вам нужно будет использовать этот хук, если вы хотите что-то сделать до визуального обновления DOM.
Если вы исходите из компонентов класса, которые отображаются так же, как componentDidUpdate
и componentDidMount
, рекомендуется сначала начать с useEffect и использовать useLayoutEffect только в том случае, если useEffect вызывает проблему.
useDebugValue()
Этот хук можно использовать для отображения метки для пользовательских хуков в React Dev Tools. Это очень полезно для отладки с помощью React Dev Tools. Не рекомендуется добавлять значения отладки к каждому пользовательскому хуку, и это наиболее ценно для пользовательских хуков, которые являются частью общих библиотек.
Пользовательские хуки React
Создание собственных хуков позволяет извлекать логику компонентов в повторно используемые функции. Пользовательский хук — это функция JavaScript, имена которой начинаются со слова use
и могут использоваться для вызова других хуков.
Заключение
Изучение React Hooks сделает вашу жизнь намного проще, а код — более оптимизированным. Для полного понимания React Hooks:
Документы React — https://reactjs.org/docs/hooks-intro.html
W3Schools — https://www.w3schools.com/react/react_hooks.asp
Журнал Smashing — https://www.smashingmagazine.com/2020/04/react-hooks-api-guide/#useReducer