Были ли у вас проблемы с изучением хуков React? Я знаю, да. В React так много хуков: useState, useEffect, useMemo и этот список можно продолжить. Зацепов не только миллион, но и некоторые из них трудно понять. Вот почему я создаю эту шпаргалку по React Hook, чтобы вы, ребята, могли ссылаться на нее при разработке своего следующего приложения. Я расскажу о 5 хуках React, которые вы будете использовать в повседневной жизни как разработчик.

Для тех из вас, кто плохо знаком с функциональным программированием или пришел из разработки компонентов на основе классов в приложениях React, вам может быть интересно, зачем мне нужны хуки. Этот небольшой раздел ниже предназначен только для вас.

Хуки - это функции, которые позволяют нам «подключаться» к функциональным возможностям состояния и жизненного цикла в функциональных компонентах.

Крючки позволяют:

  • повторное использование логики между компонентами
  • упростить и организовать наш код, чтобы разделить проблемы и не запутать нашу кодовую базу
  • избегайте путаницы с this
  • избегайте привязки, конструкторов классов и кучи другого бесполезного мусора

Теперь, когда вы знаете, зачем нам нужны крючки, я расскажу о пяти крючках, которые вы будете использовать в повседневной жизни.

1. useState

Проще говоря, useState позволяет создавать переменные состояния в функциональном компоненте. Если вы не знаете, что такое состояние, состояние позволяет вам получить доступ к определенным значениям и обновить их в любой момент времени.

Проще говоря, useState - это то, что вам нужно использовать при создании переменной, которую вы можете изменить позже.

Всякий раз, когда вы создаете переменную состояния, вам необходимо предоставить ей значение по умолчанию (это может быть любой тип данных).

Мы можем объявить переменную состояния с помощью const, и когда мы используем ее в нашем коде, нам нужно деструктурировать ее, чтобы использовать в нашем коде.

Вы также можете обновить переменную состояния, если вам когда-нибудь понадобится что-то изменить.

Чтобы обновить переменную состояния, нам нужно передать функции установки новое значение, которое мы хотим, чтобы наше состояние было.

Всякий раз, когда вы объявляете свою функцию-сеттер, в большинстве случаев вы ставите перед ней префикс со словом «установить».

Еще одна важная вещь, о которой следует помнить, - это то, что вы можете использовать несколько useState в одном компоненте.

Вы можете подумать, когда мне когда-нибудь понадобится использовать более одного useState. См. Пример ниже.

Если новое состояние переменной зависит от предыдущего, мы можем получить доступ к предыдущему состоянию и применить изменения.

Например, мы могли бы добавить 1 к текущему значению yearsOld, чтобы увеличить его.

Вы также можете управлять состоянием с помощью объекта, это позволяет вам управлять отдельными значениями как парами ключ-значение.

Как показано в приведенном ниже примере, когда вы обновляете состояние с помощью объекта, вам необходимо распространить предыдущее состояние.

Теперь вам может быть интересно, зачем нам это нужно. Причина в том, что когда мы не помещаем спред, он перезаписывает все состояние и удаляет все остальные переменные состояния, которые вы указали.

Возьмем пример ниже. В useState есть имя и возраст. Если мы не поместим оператор распространения в первую функцию changeName, состояние потеряет ключ age.

2. useEffect

Хук useEffect позволяет нам выполнять побочные эффекты в функциональных компонентах. Побочные эффекты используются, когда нам нужно получить данные из API или когда нам нужно работать с dom.

Побочные эффекты - это действия, которые могут непредсказуемо изменить состояние нашего компонента.

useEffect принимает функцию обратного вызова, которая по умолчанию запускается каждый раз при перезагрузке страницы.

Еще одна интересная вещь, которую позволяет нам использовать useEffect, - это то, что мы можем условно выполнять эффекты с массивом зависимостей. Это второй аргумент, который передается в useEffect.

Если какое-либо значение изменяется, useEffect запускается снова. Однако, если в массиве зависимостей нет значений, useEffect будет запущен только один раз.

useEffect также позволяет вам отказаться от подписки на слушателей, возвращая функцию в конце эффекта.

Мы хотели бы отказаться от подписки на события, потому что, когда компонент отключается. Если мы не откажемся от подписки, React попытается обновить состояние, которого больше не существует, что приведет к ошибке.

3. useRef

Ссылка - это специальный атрибут, который доступен в любом компоненте React. Они позволяют нам создавать ссылку на элемент.

Хук useRef в основном указывает на определенный элемент и получает от него значение. Чаще всего ловушка useRef применяется при работе с формами.

4. useContext

useContext помогает нам избежать бурения опор, кошмара разработчиков React. Детализация опоры делает ваш код беспорядочным и быстро создает проблемы при разработке остальной части приложения.

Контекст полезен для передачи свойств на многие уровни дочерних компонентов от родительского компонента.

useContext дает нам простую функцию для доступа к данным, которые мы предоставили в опоре значения поставщика контекста в любом дочернем компоненте.

5. useReducer

Хук useReducer действует очень похоже на Redux. Он имеет редуктор и действия, которые изменяют состояние в редукторе. Вызов useReducer возвращает свойство состояния и функцию dispatch.

useReducer использует редуктор, который не такой строгий, как Redux, например. второй параметр, переданный редуктору, action не обязательно должен иметь свойство type. Это позволяет выполнять такие манипуляции, как переименование второго параметра.

Что мне теперь делать?

Теперь, когда вы узнали больше о некоторых полезных хуках, реализуйте их в своем следующем проекте. Посетите канал Сонни на YouTube здесь.

Вы также можете создать несколько клонов, которые я сделал на канале. Будет еще много сборок, чтобы их высматривать. Если вы хотите поднять свои навыки на новый уровень, обязательно ознакомьтесь с Героями с нуля до полного стека здесь.

Поделитесь этим со всеми, кто, по вашему мнению, получит от этого пользу. Если у вас есть предложения, напишите мне. Если вам нравится мой контент, не стесняйтесь покупать мне кофе!

Благодарю вас!

Шрикар Кусуманчи
(автор команды PAPA)