Question

在下载页面的所有内容之前，我正在使用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。

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

或者mayebe：

加载所有内容（包括图像）后，我如何对完整的安装组件做出反应？

Answer 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开始。这会将您的应用拆分为逻辑块。一旦您对代码拆分更加满意，其他可以拆分代码的地方就会变得更加明显。

使用react-loadable加载页面的错误方式

1 个答案: