В общем, веб-сайты обрабатывают получение данных разными способами, например, показывая счетчик (например, в случае Netflix), индикатор выполнения или настраиваемую анимацию, один из этих способов (например, используемый Medium и Facebook) - это обработка выборки данных на браузер с помощью React Skeleton Screens, чтобы было понятнее, проверьте изображение ниже
Это будет наше приложение, мы создадим быстрое, простое и быстрое приложение React.js, которое показывает случайные стихи для случайного поэта, не волнуйтесь, все будет объяснено следующим образом, а исходный код будет предоставлен в конце 😉
Настраивать
Итак, прежде всего давайте инициализируем наш проект, создав приложение response.js:
npx создать-реагировать-приложение реагировать-экраны-пример
Теперь, чтобы инициализировать наш контент, мы будем использовать бесплатную базу данных поэзии, которую вы можете найти здесь, так что приступим к написанию кода. Таким образом, нам понадобятся две переменные состояния стихи и поэт для обновления с помощью обратного вызова API.
Как на картинке выше; функция «fetchPoems» выполняет первый вызов, чтобы получить список доступных поэтов, затем ей нужно случайное имя, чтобы проанализировать его, со вторым вызовом, чтобы получить список стихов, эта функция сначала вызывается в хуках useEffect с таймером для посмотрим, как все работает, тогда мы удалим таймер и просто вызовем его напрямую без какого-либо таймера, как он обычно используется
Это означает, что он будет отображать скелетные экраны в течение 5 секунд перед визуальным изменением содержимого, но не забудьте поместить эту строку в комментарий и вызвать функцию «fetchPoems» напрямую, как в строке 7.
Теперь в закрытии возврата мы отрендерим контент условно в состояние, поэтому при первом рендеринге у нас будут предварительные данные (скелетные экраны позже), а затем после простого монтажа нашего useEffect вызовет fetchPoems для обновления контента, поэтому давайте построить наши скелетные экраны.
Скелетные экраны
Просто наши скелетные экраны предназначены для настраиваемых html-элементов с серым цветом в качестве фона и некоторых CSS-анимаций, чтобы он сверкал. Прежде всего, нам нужно знать природу содержимого нашего средства визуализации, то есть: текст, заголовок, заголовок, изображение и аватар, в нашем случае у нас есть три типа содержимого: однострочный текст (заголовок), многострочный текст и аватар. , поэтому мы должны проектировать наши скелеты относительно этого. Итак, начните с создания папки и назовите ее «скелет» с двумя файлами «index.js» и «style.css», «index.js» относится к компоненту React, который должен получить реквизит, указывающий тип контент, потому что мы настроили наш CSS на основе этого
Итак, как вы можете видеть, мы создаем имена наших классов CSS на основе полученных реквизитов, которые будут позже настроены в «./style.css» следующим образом
Теперь вернемся к нашему App.js, чтобы обновить метод рендеринга с помощью этой новой логики, чтобы показать скелет перед выборкой данных в функции хуков.
Итак, здесь мы просто проверяем, пусты ли исходные данные, если да, мы визуализируем четыре блока в каждом, у нас есть заголовок и элемент основного текста, тогда мы визуализируем простой элемент об авторе с аватаром и элементом заголовка, но если состояние равно хорошо обновлено, то мы визуализируем десять стихотворений с заголовками, как в функции map () в строке 6, и блок справа с некоторой информацией поэта.
Незадолго до конца давайте добавим небольшую CSS-анимацию, которая будет отображаться со скелетом, поэтому создайте еще одну папку и назовите ее, например, «мерцание» (как я сделал 😜) с двумя файлами «index.js» и «style.css». ”, Этот блок анимации позже будет заключен в элемент Skeleton, поэтому давайте посмотрим на этот корневой файл анимации:
просто здесь у нас есть блок-оболочка, который мы вставим в анимацию, блок, который будет использоваться для анимации, и в файле CSS ключевые кадры анимации, которые определяют перевод в строке X, анимация займет 1,5 секунды, чтобы быть выполняется слева направо в бесконечном цикле.
Наконец, мы должны добавить эту новую оболочку анимации к элементу Skeleton, просто обновите файл fine skeleton / index.js, импортировав файл анимации, и оберните компонент в корневой блок следующим образом:
Вот и все! 😃
Исходный код: https://github.com/BLemine/medium-article-React-Skeleton-Screens
