Создайте перехватчик React и опубликуйте его в пакетах NPM

Это небольшой туториал о том, как создать собственный хук React.

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

Есть два основных крючка React:

• useState
• useEffect

useState Hook

Домашняя страница useState в React используется для создания состояния в функциональном компоненте. React сохранит это состояние между повторными рендерингами. useState возвращает пару: текущее значение состояния и функцию, которая позволяет вам его обновлять. Вы можете вызвать эту функцию из обработчика событий или где-нибудь еще. Он похож на this.setState в классе, за исключением того, что он не объединяет старое и новое состояние.

useEffect

Перехватчик эффекта добавляет возможность обрабатывать побочные эффекты и имитировать жизненный цикл реакции аналогично компонентам на основе классов. Он служит той же цели, что и componentDidMount, componentDidUpdate и componentWillUnmount в классах React, но объединен в единый API. Когда вы вызываете useEffect, вы указываете React запускать вашу функцию «эффекта» после сброса изменений в DOM.

Создайте свой собственный крючок 💡

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

useBrowserStorage

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

Настраивать

Самый быстрый способ начать - использовать шаблон. Так что вам не нужно беспокоиться о добавлении зависимостей и инструментов сборки. Мы будем использовать пакет create-react-hook NPM для создания шаблона проекта.

Https://www.npmjs.com/package/create-react-hook

npx create-react-hook <hook-name>

После выполнения этой команды ответит на некоторые вопросы, и CLI настроит проект.

Напишите свою логику

Теперь вы зашли так далеко, давайте напишем нашу useBrowserStorage логику ловушки. Если вы настроили проект с помощью create-react-hook CLI, то в src/index.(jsx, tsx) есть файл входа, в котором есть пример кода для написания ловушки. Заменим.

export const useBrowserStorage = () => {
  // logic will go here
}

Мы предоставим один вариант {type} для переключения между localStorage и sessionStorage. Значение по умолчанию для типа localStorage.

const STORAGE_TYPES = ['localStorage', 'sessionStorage'];
export const useBrowserStorage = (options = {}) => {
  const type = (STORAGE_TYPES.includes(options.type) && options.type) || 'localStorage';
}

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

Наконец объединены в один файл

Опубликовать в NPM

Когда мы будем готовы с нашим хуком, давайте опубликуем его в пакетах NPM.

Войдите в интерфейс командной строки NPM. Введите свое имя пользователя, пароль и адрес электронной почты для входа.

npm login

После успешного входа в систему давайте запустим эту команду, чтобы опубликовать

npm publish

Вот и все!!!

Совет: если вы хотите снова опубликовать свой пакет с новыми изменениями или исправлениями ошибок. Затем вам необходимо обновить версию вашего пакета. Вы можете вручную обновить версию пакета в package.json файл или запустить эту команду:

npm version patch -m "message"

Читать дальше для команды npm version

Вот полный исходный код useBrowserStorage

Надеюсь, вам понравился этот урок. Спасибо за чтение!!!