React — одна из самых популярных платформ в отрасли на данный момент, потому что она позволяет создавать модульные приложения и повторно использовать большой объем кода. Чтобы расширить эту функциональность, группа React пару лет назад представила функциональные компоненты и хуки, чтобы можно было расширить эту мантру модульности. В этой статье вы узнаете об основах хуков и о том, как их использовать.
Хуки существуют со времен React 16.8, и их цель — позволить вам использовать функции компонента класса (такие как методы состояния и жизненного цикла) без написания класса. Хуки предоставляют более прямой API для уже известных вам концепций React: props, state, context, refs и жизненный цикл, и они обеспечивают мощный способ их объединения.
Для компонентов класса есть два барьера, которые атакуют самые важные стороны разработки, людей и машины. Для людей классы могут быть немного сложными для понимания из-за всех накладных расходов и концепций, которые они подразумевают, кроме того, у вас есть сложности, которые сам Javascript накладывает на классы (такие как связывание, прототипирование и концепция этого). ), и у вас очень сложный способ написания кода. Еще одним недостатком компонентов класса является читабельность кода, на которую может повлиять ограниченная функциональность методов, используемых для жизненного цикла, что заставляет разработчиков объединять несвязанную логику в один и тот же метод. Последняя проблема заключается в том, что любая оптимизация, которую вы можете использовать для своего кода, например, предварительная упаковка компонентов или минимизация, может быть скомпрометирована компонентами класса и может сделать горячую перезагрузку ненадежной.
Именно здесь хуки спасают положение, решая эти и другие проблемы, позволяя вам использовать больше функций React без классов. Хуки охватывают функции, которые разработчикам гораздо легче понять. Кроме того, стоит отметить, что хуки работают вместе с классами и любым существующим кодом, но являются стандартом для продвижения вперед в разработке React.
Хуки никуда не денутся, и это будущее функциональности React, они охватывают все варианты использования, которые может иметь класс, и даже больше, и они делают код более простым для написания и более читабельным, поэтому в любых обстоятельствах вы должны использовать хуки. Однако, если вы привыкли к разработке с использованием классов и лучше понимаете методы жизненного цикла, особенно компонент смонтировался, вы все равно можете использовать компоненты класса для помогите с этой задачей, так как это может быть сложно сделать с хуками интуитивно понятным способом. Но настоятельно рекомендуется выложить функциональность с помощью компонента класса, чтобы настроить его так, как вы хотите, чтобы он работал, а затем попытаться воспроизвести его с помощью хуков, чтобы получить подробные знания о том, как использовать хуки.
Теперь давайте рассмотрим внутреннюю работу хуков, начав с самого простого useState. Этот хук очень прост, но он может иметь много сложностей и разных способов его использования в зависимости от того, что вам нужно, поэтому давайте начнем.
Хук useState используется, как следует из его названия, для управления состоянием вашего компонента, это может быть одна переменная или она может быть разделена на несколько переменных. Не рекомендуется использовать объект как полное состояние из-за сложности обновления определенной части этого состояния и воздействия на другие значения, которые не должны были изменяться. useState принимает начальное значение для состояния в качестве аргумента и возвращает массив из двух вещей, первая позиция — это фактическое состояние, поэтому значение, которое оно имеет в настоящее время, а вторая позиция — это функция, которую мы используем для изменения (или установки ) стоимость государства. Это состояние может быть установлено асинхронно, что означает, что каждый раз, когда вы используете функцию set, независимо от того, сколько раз вы вызываете ее внутри обратного вызова, она всегда будет обновлять состояние только один раз, если вы хотите, чтобы изменение немедленно отражалось, что вам нужно сделать состоит в том, чтобы передать функцию обратного вызова в качестве аргумента для функции set, этот обратный вызов будет принимать текущее значение состояния в качестве аргумента, а затем вы можете манипулировать значением для изменения состояния, это изменение сразу же отразит изменение, и когда вы вызовете функцию установите функцию несколько раз, она будет обновляться каждый раз, когда она вызывается.
Давайте перейдем к следующему хуку под названием useEffect. Этот хук позволяет нам воспроизводить поведение методов жизненного цикла внутри функциональных компонентов, но он также расширяет эту функциональность и позволяет нам отслеживать отдельные или сгруппированные переменные (состояния, реквизиты и т. д.) с использованием массива зависимостей, это позволяет изолировать функциональность кода, улучшая его читаемость.
Хук useEffect принимает два аргумента, первый — это функция обратного вызова, которая будет запущена при активации хука, а второй — массив зависимостей, этот аргумент является необязательным и позволяет указать какие переменные будут вызывать обратный вызов при их изменении. Этот массив зависимостей позволяет нам имитировать монтирование компонента (передача пустого массива) и обновление компонентов для классов (без передачи массива). Стоит отметить, что когда вы указываете переменную внутри массива зависимостей, она будет запускаться при монтировании компонента и каждый раз, когда эта переменная изменяется, поэтому для более точной функциональности лучше отслеживать, смонтирован ли компонент уже с состоянием . Вы также можете вернуть функцию обратного вызова, которая будет выполняться при запуске эффекта использования, эта функция будет выполняться первой, а затем все остальное внутри хука будет выполняться вторым.
Мы уже видели наиболее часто используемые и важные хуки, которые помогут в большинстве ситуаций воспроизвести функциональность компонентов класса. Теперь давайте углубимся в более специфичные для прецедентов и малоизвестные хуки, которые реагируют на подарки.
Начиная с хука useMemo. Этот хук используется для кэширования значения зависимости, поэтому, когда вы используете его внутри приложения и компонент выполняет повторную визуализацию без изменения этого значения, он запоминает это значение и использует его, делая ваше приложение быстрее, это называется мемоизацией.
Хук useCallback очень похож на хук useMemo, но вместо кэширования значений он кэширует функции, которые запускаются при изменении зависимости, а не при каждом повторном рендеринге.
Другой распространенный хук — это useRef. Это позволяет нам получить элемент HTML, не выбирая его из DOM, просто используя его, мы создаем указатель на этот элемент, к которому прикреплена ссылка, что позволяет нам манипулировать им и его свойствами, просто используя этот указатель.
Хук useContext создаст хранилище, и все, что находится внутри него, будет доступно во всем приложении, аналогично тому, что Redux делает со своим хранилищем. Этот хук немного сложнее в использовании, потому что он требует некоторой настройки внутри приложения, например, настройки контекста и поставщиков для этого контекста. Если вы хотите узнать больше об этом хуке, не стесняйтесь обращаться к документации.
Последний хук, о котором мы поговорим, это хук useReducer. Этот хук позволяет нам управлять нашим состоянием очень контролируемым образом (это так же, как состояние управляется в Redux), используя определенные действия и контролируя, что эти действия делают с состоянием, когда они отправляются, и если действие нет в белом списке, редьюсер просто оставляет состояние как есть. Это вносит небольшие накладные расходы, потому что вам нужно определить редьюсер и действия, чтобы он работал, но это дает вам очень безопасный способ управления вашим состоянием.
Многие люди используют комбинацию useContext и useReducer для замены Redux в своих приложениях.
Поскольку вы уже используете функциональные компоненты, помните, что они являются функциями, а не классами, реакция позволяет вам создавать свои собственные хуки, которые также являются функциями, для извлечения логики, к которой вы хотите получить доступ или повторно использовать в разных частях приложения, это возможно. потому что вся парадигма хуков — это функции, вызывающие другие функции. Эта функциональность позволяет вам еще больше модульизовать свой код, чем вы могли раньше. Подробнее о пользовательских хуках можно прочитать в документации.
Это было веселое путешествие по миру хуков React, поскольку мы узнали, что они из себя представляют, когда и как их используют, а также о некоторых основных хуках, которые поставляются из коробки.
Это все, чем я хотел поделиться с вами о хуках, но многие другие хуки здесь не рассматриваются. Если эта статья вызвала у вас интерес к хукам, ознакомьтесь с документацией для более глубокого понимания хуков.
Я надеюсь, что эта статья помогла вам лучше понять хуки React и начать свое путешествие по React. Если вам понравилось, пожалуйста, хлопните в ладоши и ознакомьтесь с другими моими статьями.
Рекомендации
https://www.youtube.com/watch?v=4Cf86qVEIJY
https://reactjs.org/docs/hooks-intro.html
