Пошаговое руководство по созданию пользовательских хуков React в TypeScript
Согласно результатам ежегодного опроса Состояние Javascript, не похоже, что React или TypeScript никуда не денутся в ближайшее время, поэтому стоит потратить некоторое время и изучить, как они работают!
Хуки React произвели революцию в том, как мы можем создавать компоненты React, поскольку они, как правило, значительно более интуитивно понятны, чем компоненты класса. Тем не менее, одна функция, которая не используется почти так, как должна была бы, — это возможность создавать собственные хуки!
Пользовательские хуки позволяют нам абстрагироваться от логики компонентов React и использовать их повторно! Я предлагаю делать это только с логикой, которая на самом деле многократно используется в вашем веб-приложении.
Подробнее о хуках можно узнать здесь.
Ради этой статьи я собираюсь создать пример useToggleхука! Переключение чего-либо в пользовательском интерфейсе довольно распространено, поэтому мы должны извлечь из этого большую пользу.
Создание крючка
Во-первых, давайте создадим файл useToggle.ts и построим скелет для нашего хука. Все хуки должны начинаться со слова использовать!
Переключатель обычно просто полагается на переключение логического состояния с true на false и наоборот, однако, чтобы сделать его более полным, давайте добавим некоторые дополнительные, необязательные , функциональность хука, где мы можем полностью установить его в false или true.
Создадим состояние и скелет функций:
Вы должны импортировать соответствующие хуки из самого React, в данном случае useState и useCallback.
import {useState, useCallback } from 'react';Хук useState имеет доступ к предыдущему состоянию, это обычно безопаснее использовать, поэтому мы просто переключим его с помощью этой функции. Две другие функции, close и open, будут напрямую устанавливать состояние либо в true, либо в false. Состояние переключателя и три функции будут возвращены в виде массива.
Машинопись
И последнее, но не менее важное: давайте добавим нашему хуку некоторую безопасность типов, сообщив функции, что мы ожидаем вернуть.
Мы возвращаем массив с внутренним состоянием хука и тремя функциями для изменения состояния!
В качестве небольшого дополнения мы можем добавить к хуку начальное состояние на случай, если мы хотим, чтобы он начинался как закрытый или открытый:
Заключение
Вот и все! Хуки — отличный способ абстрагировать логику, используемую в компонентах React.
Если вам понравилось, свяжитесь со мной в LinkedIn или Twitter.
Первоначально опубликовано на https://relatablecode.com 6 марта 2022 г.
Создавайте компонуемые веб-приложения
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.
Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также ускорять, масштабировать и стандартизировать разработку в команде. Попробуйте компонуемые внешние интерфейсы с помощью Design System или Микроинтерфейсы или изучите компонуемые внутренние интерфейсы с серверными компонентами. . Попробуйте →
