在没有完全呈现组件而没有重复代码的情况下，在每个组件上显示加载屏幕的最佳方法是什么

Question

我正在开发一个移动反应Web应用程序。

现在，我需要在组件未完全呈现时开发加载屏幕，因为您知道由于网络问题，移动设备问题或其他问题，我的某些组件可能很快加载。

我知道我可以像这样画加载画面：

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>)}
   }
}

这段代码的问题是，我应该在所有组件中重复相同的算法。如果在render（）中已经存在一些条件语句，它完全忽略了DRY并且非常混乱。

总而言之，我想显示加载屏幕，而不是在每个组件上重复代码。我应该使用HOC吗？什么是最好的选择？

Answer 1

你有各种各样的选择，恕我直言，使用异步Import（）可以使用Loadable处理它。这将让你保持DRY方法和代码分裂：

例：

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