Что такое заставка? Почему вы должны это реализовать?

Если вы пришли сюда, погуглив, вы, вероятно, уже знаете, что это такое. В противном случае, и для моих подписчиков, Заставка — это просто причудливое название Lзагрузочного экрана, а также очень умная идея, которая появляется при запуске любого приложения/сайта. Почему умная идея? Две основные причины:
1. Показывайте свой логотип/торговую марку пользователю все больше и больше (создавая прочное впечатление о логотипе вашего филиала в сознании ваших клиентов)
2. Извлекайте любой контент/данные в фоновом режиме ( без показа каких-либо скучных загрузок), которые вы, возможно, захотите сначала показать своим пользователям.

Теперь, прежде чем мы запачкаем руки, предполагается, что у вас уже есть настроенное приложение для реагирования и вы можете его запустить. Тем не менее, вы всегда можете найти полное решение в этом репозитории GittHub. Разветвите, загрузите и / или используйте его по своему желанию. Никаких лицензий или ограничений для личного, коммерческого или любого другого использования.

Необходимые условия:
 Базовое понимание:
1. ReactJs
2. HTML

Начнем

Лучший способ разработки экрана-заставки — использование компонента более высокого порядка, чаще называемого HOC. Если вы не знаете, что такое HOC и как его использовать. Не волнуйся. Как мы увидим при разработке экрана-заставки, концепция проста в использовании. Однако для вашего удобства вот формальное определение:

Компонент высшего порядка (HOC) — это продвинутая техника в React для повторного использования логики компонента. HOC сами по себе не являются частью React API. Это паттерн, вытекающий из композиционной природы React. Конкретно компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент.

Добавление компонента экрана-заставки
Запустив и запустив приложение, создайте новый файл с именем withSplashScreen.js в папке ./src/components. Обратите внимание, что имя файла здесь начинается с префикса with, это обычная и хорошая практика среди разработчиков React. Всякий раз, когда вы создаете префикс HOC имени, используя with.

После создания вышеуказанного файла вставьте следующий код:

import React, { Component } from 'react';
import logo from '../logo.svg';


function SplashMessage() {
    return (
        <div>
            <img src={logo} className="App-logo" alt="logo" />
        </div>
    );
}

export default function withSplashScreen(WrappedComponent) {
    return class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                loading: true,
            };
        }

        async componentDidMount() {
            try {
                // Put here your await requests/ API requests
                setTimeout(() => {
                    this.setState({
                        loading: false,
                    });
                }, 1000)
            } catch (err) {
                console.log(err);
                this.setState({
                    loading: false,
                });
            }
        }

        render() {
            // while checking user session, show "loading" message
            if (this.state.loading) return SplashMessage();

            // otherwise, show the desired route
            return <WrappedComponent {...this.props} />;
        }
    };
}

Как мы видим в этом файле, есть 2 функции:
1. SplashMessage:это компонент, который HOC будет показывать при обработке любых запросов.
2. withSplashScreen: это сам HOC.

Этот HOC принимает параметр с именем WrappedContent, чтобы знать, что пытается отобразить App. Теперь, когда React вызывает метод componentDidMount, компонент начинает выполнять код и вызывать любые запросы, если они есть. Как только этот запрос будет выполнен, эта функция теперь вызывает setTimeout с задержкой в ​​1 секунду (или 1000 мс).

Этот тайм-аут на самом деле имитирует реальный сценарий того, что произойдет, если будет сделан какой-либо запрос, что, очевидно, приведет к некоторой задержке в получении ответа по сети.

Теперь во время этой задержки HOC заменит компонент, который приложение хочет отобразить (то есть WrappedContent), на компонент SplashMessage. Как только приложение завершит получение запрошенных данных, через 1 секунду HOC установит состояние загрузки на loading: false, что вызовет повторную визуализацию, в результате чего приложение на этот раз отобразит WrappedContent вместо компонента SplashMessage.

До сих пор мы еще не использовали наш компонент HOC. Пришло время заставить вещи работать.

Обновите свой App.js, внеся следующие изменения в соответствии с упомянутыми комментариями:

import './App.css';
import withSplashScreen from './components/withSplashScreen';  // Include this line

function App() {
  return (
    <div className="App">
      Hello, World!
    </div>
  );
}

// Update this line, so that withSplashScreen gets App as parameter
export default withSplashScreen(App);

Примечание. При вызове withSplashScreen(App) параметр WrappedContent компонента withSplashScreen указывает на App. То есть, после завершения задачи экрана-заставки, экрана-заставки или, скажем, HOC в конечном итоге отрисовывает сам компонент App.

Вуаля! вы только что успешно создали экран-заставку для своего веб-приложения React. Чтобы увидеть его в действии, запустите свое приложение (или просто перезагрузите страницу, если ваше приложение уже запущено). Вы увидите заставку со временем загрузки вашего запроса (если есть) + 1000 миллисекунд в соответствии с setTimeout.

Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.