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

Question

我正在开发移动 React 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

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

What is the best way to show loading screen on every components when component is not fully rendered WITHOUT REPEATING CODES

dry

loading

reactjs

higher-order-components