使用 react-loadable 加载页面的糟糕方式答案

【问题标题】：Bad way of loading pages with react-loadable使用 react-loadable 加载页面的糟糕方式
【发布时间】：2019-02-01 03:26:37
【问题描述】：

我正在使用 React + React-Router + React-loadable 在下载页面的所有内容之前添加一个 preLoader 页面。这是我的代码：

AppLoader.js：

import Loadable from 'react-loadable';
import Loading from './preLoader';
import React from 'react';

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

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

preloader.js：

import React from 'react';
import classes from '../../styles/main/preload.less';

let opacityInterval;

export default class PreLoadPage extends React.Component{
    render(){
        return(
            <div className={classes.rootTag}>
                Loading...
            </div>
        );
    }
}

我想在应用页面完全准备好之前显示加载页面。并且所有图像和其他任何内容都已下载。也许这是问题服务器将要做出反应的内容。我正在使用 django-rest-framework 作为后端。

我如何告诉加载器等到页面完全呈现然后消失？

或者也许：

加载完所有内容（包括图片）后，如何判断对完成安装组件的反应？

【问题讨论】：

标签： reactjs

【解决方案1】：

就在提出这个问题的时候，react 发布了 16.6.0 版，其中包括 React.lazy。此外，还提供了一个Suspense 组件来渲染fallback，或加载组件/动画。

以下内容将等到从服务器检索到所有内容（文件/块/资源）后，才会呈现延迟加载的组件：

const App = React.lazy(() => import('./App'))
const AppWrapper = () => {
  return (
    <Suspense fallback={<Loading />}>
      <App />
    </Suspense>
  );
};

话虽如此，延迟加载整个应用程序可能不是最佳选择。 react docs 建议以 lazy loading each route 开头。这会将您的应用程序拆分为逻辑块。一旦您对代码拆分变得更加熟悉，拆分代码的其他地方就会变得更加明显。

【讨论】：