Каков наилучший способ показать экран загрузки на всех компонентах, когда компонент отображается не полностью, БЕЗ ПОВТОРНЫХ КОДОВ - PullRequest
Новая
       49

Каков наилучший способ показать экран загрузки на всех компонентах, когда компонент отображается не полностью, БЕЗ ПОВТОРНЫХ КОДОВ

0 голосов
/ 17 сентября 2018

Я занимаюсь разработкой мобильного веб-приложения.

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

Я знаю, что могу нарисовать экран загрузки примерно так: 

class Example1 extends React.Components{
   state={loaded:false}
   componentDidMount(){
     this.setState({loaded:true});
    }
   render(){
     if(!this.state.loaded){ return(<Loading/>)}
     else{ return( <div>Loaded!</div>)}
   }
}

Проблема с этим кодом в том, что я должен повторять одни и те же алгоритмы во всех компонентах. Он полностью игнорирует DRY и действительно грязный, если в render () уже есть некоторые условные операторы.

Итак, в заключение я хочу показать экран загрузки без повторения кодов для всех компонентов. Должен ли я использовать HOC? Какой самый лучший вариант?

1 Ответ

0 голосов
/ 17 сентября 2018

У вас есть несколько вариантов, ИМХО, лучший способ справиться с этим с помощью Loadable, использующий асинхронный импорт (). Это позволит вам сохранить СУХОЙ подход и разделение кода:

Пример: 

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

Ссылка: https://github.com/jamiebuilds/react-loadable

...