Краткое руководство по кастомным хукам React
Перехватчики React предоставляют отличный способ для написания компонентов React без определения класса. Вместо этого мы применяем функциональный подход к созданию компонентов. Это позволяет нашему коду быть более модульным, поскольку мы больше не зависим от методов жизненного цикла для их разделения, а, скорее, мы разделяем компоненты по их вариантам использования и назначению.
Если вы новичок в хуках, обязательно ознакомьтесь с обзором хуков здесь.
@Sdolidze опубликовал отличную подробную статью под названием Айсберг хуков React, в которой он поэтапно описывает различные хуки, предлагаемые React. В этой статье мы рассмотрим, как создать собственный перехватчик React.
Что такое кастомный хук?
Хуки позволяют нам взаимодействовать, изменять и обновлять состояние и жизненный цикл компонента. Ссылаясь на React docs, самое простое правило кастомного хука состоит в том, что он всегда должен начинаться с префикса use. Пользовательский хук просто будет похож на обычную функцию, поскольку мы можем решить, какие аргументы ему требуются. Пользовательский хук также должен соответствовать всем определенным правилам хуков.
Основное преимущество создания пользовательского хука заключается в том, что мы можем извлекать логику нашего компонента в функции многократного использования. Это делает наш код более модульным и «чистым».
Что мы строим?
Один из наиболее распространенных способов сохранения данных в приложении React - использовать локальное хранилище, которое поставляется с браузерами. Мы можем думать об этом как о небольшой области хранения, где мы можем хранить несколько простых пар ключ-значение для сохранения некоторых данных. Эти данные могут быть чем угодно, от хранения атрибутов профиля пользователя, поисковых запросов или даже предпочтений, таких как тема приложения.
Взаимодействие с локальным хранилищем довольно просто. У нас есть две основные функции: setItem и getItem. Мы можем использовать их, как показано ниже:
// Set a key-value pair
localStorage.setItem('userId', 'john_doe');
// Retrieve value by key
localStorage.getItem('userId');
Использование в зданииLocalStorage
А теперь приступим. Сначала давайте определим наш хук useLocalStorage в новом файле с именем useLocalStorage.js.
В этом коде мы определяем новую функцию, которая принимает ключ и начальное значение и сохраняет их в переменной состояния с именем value. Мы также определили функцию с именем storeValue, которая помогает сохранить функцию в локальном хранилище браузера.
Наконец, мы возвращаем функции value и storeValue вызывающей стороне.
Давайте использовать этот хук в другом файле следующим образом:
Здесь мы просто потребляем ловушку useLocalStorage, импортируя ее и передавая ей ключ. После рендеринга компонента мы вызываем функцию setUserId, чтобы установить идентификатор пользователя john_doe.
Инициализация нашего значения из localStorage
Мы хотим инициализировать наше значение из локального хранилища, чтобы увидеть, есть ли у нас какое-либо ранее сохраненное значение. Для этого давайте выполним ленивую инициализацию нашего value состояния в useLocalStorage.js.
В приведенном выше коде мы выполнили отложенную инициализацию, поскольку взаимодействие с локальным хранилищем - потенциально дорогостоящая операция, которая может быть медленной. Таким образом, мы хотим инициализировать значение только при первом запуске приложения.
Для этого мы предоставляем функцию ловушке useState, и внутри нее мы пытаемся получить ключ из локального хранилища. Если существует какое-либо значение, и мы можем проанализировать его в действительный JSON, мы возвращаем его. В случае ошибки синтаксического анализа или отсутствия ключа мы просто возвращаем initialValue.
Повышение storeValue
Наконец, давайте усовершенствуем функцию storeValue, преобразовав ее в useEffect hook, а также преобразовав наше значение в строку перед его сохранением.
Используя ловушку useEffect и указав value в массиве зависимостей, мы сможем сохранять значение в локальное хранилище каждый раз, когда value обновляется. Мы возвращаем value и setValue обратно в нашу вызывающую функцию.
Заключение
Вот и все! С помощью всего нескольких строк кода мы создали специальный перехватчик для взаимодействия с локальным хранилищем нашего браузера. Теперь каждый раз, когда мы обновляем переменную, она автоматически сохраняется в локальном хранилище. Даже при перезагрузке браузера мы можем получить значение из локального хранилища браузера и инициализировать нашу переменную.
Пользовательские хуки могут быть действительно полезны в приложениях React и могут упростить повторяющуюся логику.
Если вам интересно узнать о некоторых полезных пользовательских хуках React от сообщества разработчиков, ознакомьтесь с этой статьей Чидуме Ннамди 🔥💻🎵🎮
Удачного кодирования! 💻
Больше контента на plainenglish.io
