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

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/>;
  }
}

预加载器.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>
        );
    }
}

我想显示加载页面，直到应用程序页面完全准备好。所有图像和其他任何内容都已下载。也许有问题服务器将给出 react 的内容。我使用 django-rest-framework 作为后端。

我如何告诉加载器等待页面完全渲染然后消失？

或者也许:

加载所有内容(包括图像)后，如何判断 React 完成安装组件？

Answer 1

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

以下内容将等到从服务器检索到所有内容(文件/ block /资源)后再渲染延迟加载的组件:

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

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