Повторное использование кода очень необходимо для масштабирования. Мы рассмотрим, что такое перехватчики React и как их можно использовать, чтобы сохранить D.R.Y. наших компонентов.
Что такое React Hooks?
Предложение Хуки - новая функция, которое позволяет вам использовать состояние и другие функции React без написания класса. В настоящее время они находятся в React v16.7.0-alpha и обсуждаются в открытом RFC. Поэтому использовать их в производстве не рекомендуется.
Почему все говорят о React Hooks?
Перехватчики React - это не что иное, как революция в мире React. Они очень многое упрощают. Нужен штат, но ненавидите уроки или вас смущает this? Нет проблем, крючки тебе в спину. И не только это, ловушка также позволяет элегантно повторно использовать код. Но ждать…
Что мы подразумеваем под «возможностью повторного использования»?
Компонент React используется для инкапсуляции логики, разметки и дизайна части пользовательского интерфейса. Возникает ситуация, когда двум или более компонентам требуются некоторые общие функции, но они различаются тем, как они их используют.
Примером может служить переключатель вкладок и компоненты аккордеона. Оба эти компонента должны отображать одну панель за раз и скрывать другие. На основе пользовательского ввода (жест, щелчок, нажатие клавиши и т. Д.) Они должны изменить, какие панели скрыты, а какие отображаются. Но оба компонента сильно различаются по внешнему виду и поведению. Вкладки предназначены для переключения между различными частями приложения, тогда как аккордеон позволяет получить обзор всех точек, относящихся к одному разделу, а затем иметь возможность просмотреть любую точку в деталях.
Мы можем наблюдать, что оба компонента имеют дело более чем с одной проблемой. Логика выбора панели, которую нужно скрыть, а какую показать, - это отдельная проблема, а то, как пользователь просматривает ее и взаимодействует с ней, - это отдельная проблема. Первая проблема - это то, что мы называем сквозной проблемой, и мы можем выделить ее в независимый модуль. Таким образом, оба компонента могут использовать один и тот же модуль и сосредоточиться на своих основных задачах.
Перехватчики React предоставляют очень удобный способ реализовать сквозные проблемы, которые помогают при повторном использовании кода. Но сначала давайте рассмотрим простой пример компонента React с хуками.
Совет: используйте Бит для организации и повторного использования компонентов. Он также работает с хуками React, так что вы можете поделиться коллекцией своих хуков и повторно использовать их по мере необходимости. Существенная экономия времени и полезная для вашей команды. Попробуйте.
Пример: создание баннера с изменением цвета
Есть баннер с текстом и кнопка для изменения цвета фона баннера. Назовем это ColoredBanner. Конечный результат должен быть таким.
Очевидно, что нам нужно какое-то состояние для хранения текущего цвета фона и обработчик событий для изменения состояния. До использования хуков единственным способом решить эту задачу были классы. Мы будем использовать this.state и this.setState() для ссылки и обновления состояния соответственно. Давайте посмотрим, как это сделать с помощью React Hooks.
У нас есть массив цветов, между которыми будет чередоваться цвет фона. Затем мы вызываем метод useState(), предоставленный React. Это ловушка React, которая позволяет нам использовать состояние внутри функциональных компонентов.
Метод useState() использует переданный аргумент как начальное состояние. Поскольку мы пропустили «красный», цвет фона изначально будет красным. Затем ловушка возвращает массив, содержащий два элемента. Мы деструктурируем его, и поэтому первый элемент с именем color содержит текущее состояние цвета. Второй элемент setColor() - это метод изменения состояния color.
Затем мы определяем функцию changeColor(), которая случайным образом выбирает один цвет из массива colors, а затем используем метод setColor() для обновления состояния до нового цвета.
Наконец, мы возвращаем разметку, в которой установили для обработчика нажатия кнопки changeColor() функцию. Таким образом, каждый раз, когда пользователь нажимает кнопку, вызывается changeColor() функция, которая затем меняет цвет фона.
Необходимость разделения забот
Предположим, что теперь нам нужно создать другой компонент, который имеет такую же функцию изменения фона, но вместо того, чтобы пользователь нажимал кнопку, мы хотим, чтобы фон автоматически изменялся через заданный интервал. Теперь мы можем наблюдать некоторые вещи.
- Мы не можем напрямую использовать
ColoredBannerкомпонент, потому что он использует обработчик событий. - Нам просто нужна часть, которая случайным образом выбирает цвет и меняет состояние.
Понятно, что случайное изменение цвета и способ его использования - это отдельные проблемы. Первое необходимо в обоих компонентах, но последнее используется только в компоненте ColoredBanner. Если бы этот компонент не смешивал обе проблемы вместе, мы могли бы просто повторно использовать этот код. Для этого нам пришлось прибегнуть к таким паттернам, как компоненты высшего порядка и свойства рендеринга. Об этом я недавно тоже написал статью.
Разделение проблем с помощью хуков
Когда мы поняли, почему нам нужно разделение задач в компонентах React, давайте теперь посмотрим, как это сделать с помощью React Hooks.
React позволяет нам создавать пользовательские хуки, с помощью которых мы можем реализовывать сквозные задачи. Так можно сделать кастомный крючок для случайной смены цвета.
Соблюдая соглашения React, мы создаем функцию с именем useRandomColor(). Эта функция принимает два аргумента: colors массив и initialColor. Как и раньше, мы вызываем ловушку useState и определяем функцию changeColor() для изменения состояния цвета на случайный цвет из массива colors. В итоге мы возвращаем массив из двух элементов. Первый элемент предназначен для ссылки на текущий цвет, а второй элемент - это функция для изменения состояния. Однако возврат массива не является соглашением, объект, содержащий оба элемента в качестве ключей, также может быть возвращен.
Затем давайте посмотрим, как мы можем использовать этот пользовательский хук в компоненте ColoredBanner.
Здесь мы определяем массив цветов и передаем соответствующие аргументы useRandomColor настраиваемой ловушке. Затем мы деструктурируем возвращенный массив и используем его так же, как и любой другой перехватчик.
Теперь, если мы хотим реализовать компонент автоматического изменения цвета, нам просто нужно создать компонент, в котором метод changeColor заключен в обратный вызов setInterval.
Преимущества React Hooks
- Пользовательские хуки - это просто функции, поэтому очень легко понять, что они делают.
- Не нужно иметь дело с
this. Связывание функций становится проблемой, когда нам нужно использовать их в качестве обработчиков событий. - Синтаксис намного короче, что означает меньшую площадь поверхности для скрытия ошибок.
- Состояние теперь более детализировано. Вместо одного большого объекта состояния у нас может быть несколько маленьких хуков, каждая из которых имеет дело со своим собственным состоянием, и наши компоненты используют их все вместе. Таким образом мы избегаем слияния нового состояния со старым и предотвращаем ненужные перезаписи.
С помощью хуков мы создаем функции для каждого рендера. Это совсем не медленно в современных браузерах. Пожалуйста, прочтите эту ветку Twitter, чтобы узнать подробности и мой ответ на этот комментарий о том, как мы можем оптимизировать его, если это абсолютно необходимо.
Заключение
В этой статье мы впервые поняли, что такое перехватчики React и как мы можем использовать настраиваемые перехватчики для разделения проблем. Чтобы самостоятельно поэкспериментировать с хуками, пожалуйста, разветвите этот codeandbox.
Не стесняйтесь комментировать, предлагать идеи и добавлять свои собственные идеи! Вы можете подписаться на меня в Twitter и Medium или подписаться на мой информационный бюллетень, чтобы получать обновления о моем последнем содержании. Спасибо за чтение 🙏
