После хука useState, useEffect, возможно, является самым важным хуком React. Функциональные компоненты React позволяют использовать хуки, что впоследствии позволяет писать меньше кода в зависимости от того, как настроены хуки для работы. Хук useEffect заменяет свои аналоги на основе компонентов класса, componentDidMount, componentDidUpdate и componentWillUnmount, также известные как методы жизненного цикла. С использованием useEffect, заменяющего три разные функции, вы можете видеть, как это неизбежно приводит к более чистому коду, как я упоминал выше.

В курсе React примером, используемым для объяснения функциональности useEffect, был экран входа в систему.

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

С точки зрения функциональности приложение работает так, как ожидалось. Состояние управляется и проверяется внутри компонента по мере его кодирования. Однако, если пользователь обновит страницу или компонент каким-либо образом повторно отобразится. Обновленное состояние входа в систему также будет обновлено. В этом и заключается проблема, решением которой является useEffect.

Войдите в локальное хранилище. localStorage — это встроенная функция javascript. В практическом примере мы используем localStorage для сохранения статуса пользователей, вошедших в систему. Если вы хотите узнать больше о функции localStorage, вы можете здесь. Ради простоты и времени я избавлю вас от того, как работает localStorage, но я расскажу, как мы его используем в этом практическом проекте. localStorage сам по себе мало что делает, однако localStorage в сочетании с методом — это то, где он действительно сияет. В этом практическом проекте мы используем два метода setItem и getItem. Эти два метода затем имеют два аргумента, имя ключа и значение ключа.

В нашем вызове функции setItem localStorage мы устанавливаем имя нашего ключа на «isLoggedIn» и значение нашего ключа на 1.

Примечание: имя ключа и значение ключа могут быть названы как угодно, если вы ссылаетесь на них в вызове getItem, и это, конечно, имеет для вас смысл.

В нашем вызове функции getItem localStorage мы также устанавливаем имя нашего ключа на ‘isLoggedin’. Только на этот раз мы не устанавливаем значение ключа. Это потому, что в данном случае он нам не нужен. Нас интересует только ссылка двух вызовов функций друг на друга. Итак, getItem ищет setItem с тем же именем ключа и использует его.

Теперь к звезде нашего шоу, useEffect. Хук useEffect принимает два аргумента. Первая — это функция, известная как эффект, а вторая — массив зависимостей.

В нашем практическом проекте цель состояла в том, чтобы сохранить состояние входа в систему в localStorage с помощью хука useEffect, чтобы, пока пользователь не нажмет «Выход», он оставался в системе, независимо от того, обновляется ли страница или повторно отображается компонент.

Это было достигнуто путем написания условной функции внутри нашего хука useEffect. Это установило для нашего состояния setLoggedIn значение true.

В приведенном выше примере хук useEffect используется вместе с useState. Состояние входа пользователя является ложным при начальном рендеринге компонента (componentDidMount). Хук useEffect еще не вступает в игру, потому что в данный момент его условие не истинно. Итак, давайте перейдем к нашей функции loginHandler. Наша функция loginHandler после выполнения делает две вещи. Он устанавливает для нашего состояния setIsLoggedIn значение true, что позволяет нам перейти к экрану приветствия сверху. Во-вторых, он устанавливает наше локальное хранилище, как указано выше. Здесь в игру вступает наш хук useEffect. Внутри нашего хука у нас есть переменная с именем userLoggedIn, которая использует наш localStorage getItem, чтобы связать себя с его аналогом setItem. Затем у нас есть условное выражение, в котором говорится, что если значение ключа userLoggedIn равно 1, то setIsLoggedIn равно true. Таким образом, функция loginHandler изменяет состояние isLoggedIn с false на true при начальном монтировании компонента, где наш хук useEffect теперь устанавливает его в true при обновлении страницы, повторном рендеринге компонентов (componentDidUpdate) и любых других условиях, пока мы не скажем не делать этого. Что мы и делаем в нашей функции logoutHandler

Как вы уже видите, хук useEffect очень надежен. Он также переходит в гипердвигатель в паре с зависимостями (Зинг! Я буду здесь всю неделю). Параметр зависимости вступает в игру, когда функция помещается внутрь массива. Затем хук пытается оценить эту функцию или эти функции, и если есть изменение, он повторно отрендерит.

Приведенный выше код оценивает введенный адрес электронной почты и пароль. Это зависит от функции состояния setFormIsValid, а также от функций проверки EnterEmail и EnterPassword. useEffect постоянно проверяет эти функции на наличие изменений и при необходимости перемонтирует компонент.

Мне было не очень легко понять хуки React. Но я понимаю важность их понимания. Хук useEffect — это то, что вы не можете не знать. Имея представление о том, как его использовать, я попытался разбить его как можно проще. Обратите внимание, что может быть более простой и эффективный способ объяснить этот хук, чем я, но это был самый простой способ для меня. Надеюсь, вам понравилось, с нетерпением жду возможности поделиться с вами другими в ближайшее время.

Для получения дополнительной информации о том, как работает хук useEffect, посетите официальную документацию React JS здесь