Загрузочные экраны нужны везде - не изобретайте велосипед каждый раз.
Вступление
Если вы какое-то время занимались веб-разработкой и когда-либо нуждались в доступе к базе данных или какой-либо другой службе, содержащей данные, перед тем, как показывать страницу пользователю, вы столкнулись с потребностью в экране загрузки.
Даже с постоянно улучшающейся скоростью и доступностью, которые сегодня предоставляет Интернет, выборка данных с сервера может занять больше миллисекунд (особенно когда вам нужен большой объем данных или эти данные должны быть преобразованные браузером перед отображением на экране) или обработать запрос из браузера (например, разместить заказ в Интернете). Настоящий вопрос может заключаться в следующем: когда не нам нужны экраны загрузки в наших веб-приложениях?
Есть миллион причин, по которым может потребоваться визуальная индикация загрузки, но я здесь, чтобы рассказать вам о том, как вы можете создать единый гибкий загрузчик компонентов более высокого порядка и использовать его в нескольких местах вашего приложения React с помощью минимальные усилия.
В этом посте не рассматривается публикация компонента загрузчика и его повторное использование в других проектах, но если вас это интересует, я рекомендую вам попробовать Bit. Bit - это инструмент и центр компонентов, который упрощает публикацию, документирование и организацию компонентов React. Вы можете прочитать больше об этом здесь:
Компоненты React высшего порядка
Что, черт возьми, такое HOC?
Прежде чем идти дальше, давайте поговорим о компонентах более высокого порядка (далее называемых только HOC) и о том, что они собой представляют в React.
Официальная документация React довольно хорошо объясняет HOC, хотя и немного абстрактно.
Здесь следует сосредоточить внимание на фразе «повторное использование логики компонентов». С точки зрения непрофессионала, HOC - это способ совместно использовать одну и ту же функциональность в нескольких компонентах без необходимости переписывать упомянутую функциональность в каждом компоненте.
Это достигается тем, что компонент более высокого порядка фактически является функцией, которая принимает один компонент и возвращает новый компонент. HOC - это не компоненты в традиционном смысле React, это функции.
Если вы когда-либо использовали библиотеку управления состоянием Redux и ее connect() функцию, вы уже использовали компоненты более высокого порядка, даже если вы не знали об этом.
Примеры того, где HOC также могут пригодиться: поддержание состояния вошедших в систему пользователей в приложении, чтобы они отображали правильные представления в определенных компонентах, ИЛИ наличие одного компонента, который может добавить единый экран загрузки на все страницы, которые нужно это.
Видишь, к чему я клоню? 😉
И вот еще одна интересная вещь, которую следует отметить в отношении HOC: хотя они существуют с первых дней React, когда классы управляли - до того, как хуки вошли, чтобы украсть отображение состояния, HOC могут работать как с компонентами на основе классов, так и с функционалом без состояния. компоненты. Очень приятно, если у вас есть устаревшее приложение, которое вы поддерживаете, или вы только начинаете переходить на хуки.
Итак, без лишних слов, давайте перейдем к коду и воплотим в жизнь этот универсальный загрузочный компонент.
Построение загружающего компонента более высокого порядка
Код для загрузки HOC на самом деле не очень сложный. Вот фрагмент кода универсального загрузчика, который моя команда использует в нашем собственном приложении.
IsLoadingHOC.js
В коде вы заметите, что объявленная переменная IsLoadingHOC принимает два параметра: WrappedComponent и loadingMessage.
WrappedComponent - это любой компонент, который должен отображаться на экране, когда isLoading состояние загрузчика установлено в false, а loadingMessage позволяет передавать настраиваемое сообщение для отображения, пока компонент IsLoadingHOC активен. Таким образом, приложение может передавать пользователям разные сообщения в зависимости от того, какая страница загружается в данный момент.
Сообщения могут быть примерно такими: «Подождите, пока мы получим ваши данные», «Подождите, пока мы разместим ваш заказ» или «Подождите, пока мы ищем товар XYZ» - вы поняли.
Единственная часть состояния внутри функции HOC - это const [isLoading, setLoading] = useState(true);, который по умолчанию указывает компоненту isLoadingHOC, чтобы он отображался, как только новый компонент React, заключенный в этот HOC, монтируется в DOM.
Функция внутри HOC функции: setLoadingState - это функция, переданная (и запускаемая) независимо от того, является ли обернутый компонент, которая сообщает компоненту IsLoadingHOC показывать себя или нет.
Оператор return, заключенный внутри функции HOC, представляет собой фактический код JSX, который будет отображать новый компонент (который на самом деле является просто существующим компонентом с добавленной функцией загрузки, предоставляемой этой функцией HOC). Не стесняйтесь добавлять любую анимацию загрузки, которая вам нужна для этого <LogoAnimationLoader />.
И, наконец, сама функция HOC возвращается в самом низу фрагмента кода, потому что, как я сказал ранее, HOC - это функции, которые принимают один компонент и возвращают новый, улучшенный компонент.
Примечание. Если вам интересен компонент <LogoAnimationLoader /> в JSX, на самом деле это пользовательская анимация загрузки, созданная для нашей команды с помощью Lottie. Lottie - это библиотека, которая анализирует анимацию Adobe After Effects, экспортированную как json, а затем визуализирует ее на мобильных устройствах и в Интернете. Но это уже для другого поста - вернемся к загрузочному коду HOC.
Использование загрузки HOC в моем приложении React
Создав универсальный загрузочный компонент, пора добавить его к компоненту, которому сейчас нужен загрузчик. Я покажу пример использования загрузчика со страницей, которая генерирует и отображает загружаемые отчеты для пользователей.
Объединение IsLoadingHOC с компонентом отчета
Вот уменьшенная версия компонента <ReportPage />, чтобы проиллюстрировать, как добавить к нему IsLoadingHOC. Как вы понимаете, этот код был сокращен для ясности, но элементы, которые вам нужно увидеть, чтобы экран загрузки HOC имел смысл, присутствуют.
ReportPage.js
В приведенном выше коде вы можете видеть, что функция setLoading() передается в начале компонента ReportPage. Это опора, которая передается через IsLoadingHOC, которая является оболочкой для компонента ReportPage и позволяет включать или выключать анимацию загрузки.
В этом конкретном случае, как только страница загружается, срабатывает React useEffect() Hook и устанавливает состояние загрузчика HOC на false. Затем, если пользователь решает создать новый отчет, содержащийся в компоненте <ReportGenerator />, отображаемом в JSX, функция отчета generateReport() еще раз устанавливает состояние загрузки IsLoadingHOC на true благодаря функции setLoading(). Как только функция reportService.generateReport() успешно возвращается, setLoading() устанавливает видимость IsLoadingHOC() обратно на false.
Нижняя часть этого файла, где находится оператор export, является ключом к интеграции IsLoadingHOC с ReportPage. Чтобы компонент ReportPage (в данном случае WrappedComponent) унаследовал свойства загрузчика, он оборачивается IsLoadingHOC и передается строка “Please wait as we load your data”, которая является настраиваемой message опорой, которую IsLoadingHOC ожидает в качестве второго аргумента.
export default IsLoadingHOC(ReportPage, 'Please wait as we load your data.');
Таким образом, это анимация загрузки страницы, которую мы видим во время загрузки данных.
Ta da!
Лучшая часть? Этот IsLoadingHOC компонент может использоваться с любым другим компонентом в приложении, которому требуется анимированный загрузчик во время выборки или отправки данных.
Просто передайте функцию setLoading() компоненту, который будет обернут анимацией загрузки, добавьте пользовательский message, чтобы сопровождать его, если хотите, и вы почти готовы к работе.
Заключение
Интернет работает быстро и только становится все быстрее, но то, что мы просим его делать, является сложным и становится все более сложным. Это означает, что экраны загрузки, позволяющие пользователям узнать, что что-то происходит, сейчас важнее, чем когда-либо прежде.
В самом начале React появился шаблон, использующий композиционную природу фреймворка, и его окрестили «компонентами более высокого порядка». Название немного пугающее, но идея HOC заключается в следующем: дайте HOC некоторую логику, которую вы хотите передать между компонентами в приложении, передайте компонент в HOC, который вы хотите иметь эту логику, и HOC выплюнет новую компонент в комплекте с этой логикой. Просто как тот.
Компоненты более высокого порядка могут использоваться для поддержания состояния, когда пользователь перемещается по приложению, их можно использовать для абстрактного извлечения данных для компонентов, которые ведут себя одинаково, но имеют разные источники данных, и их можно использовать для добавления функций, необходимых в нескольких местах, например загрузочные экраны. И что самое лучшее? HOC могут использоваться с компонентами на основе классов и функциональными компонентами.
Повторите попытку через несколько недель - я напишу больше о JavaScript, React, ES6 или чем-то еще, связанном с веб-разработкой.
Спасибо за прочтение. Я надеюсь, что если в вашем приложении React есть несколько мест, которые нуждаются в анимации загрузки (или какой-либо другой функциональности, на самом деле), вы рассмотрите возможность создания многоразового HOC, чтобы упростить себе жизнь. Зачем писать один и тот же функционал более одного раза, в этом нет необходимости. 🙂
Если вам понравилось это читать, возможно, вам понравятся и другие мои бесплатные статьи:
- « Опрос в React с использованием пользовательского хука useInterval »
- « Анимация React с помощью React Transition Group »
- « Предложение по необязательной цепочке JavaScript »
Ссылки и дополнительные ресурсы
- Реагируйте на документацию компонентов более высокого порядка
- Официальные документы о том, как начать работу с анимацией Lottie.
