我正在开发一个移动反应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吗?什么是最好的选择?
你有各种各样的选择,恕我直言,使用异步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/>;
}
}