加载具有反应式可加载页面的不良方法
加载具有反应式可加载页面的不良方法
提问于 2018-10-14 14:04:15
在下载该页面的所有内容之前，我使用React +React路由器+ 反应可加载来添加一个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框架。
我如何让加载程序等待页面被完全呈现，然后消失？
也可能是：
在加载所有内容(包括图像)后，我如何判断是否对完整的安装组件作出反应？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-31 19:26:37
就在这个问题被问到的时候，react发布了16.6.0版本，其中包括React.lazy。此外，还提供了一个Suspense组件来呈现fallback或加载组件/动画。
在呈现延迟加载的组件之前，将等待从服务器检索所有内容(文件/块/资源)：
const App = React.lazy(() => import('./App'))
const AppWrapper = () => {
return (
<Suspense fallback={<Loading />}>
<App />
</Suspense>
);
};尽管如此，延迟加载整个应用程序可能不是最优的。文档建议从延迟加载每条路径开始。这将把你的应用程序分成逻辑块。一旦您对代码分割变得更加满意，其他有意义拆分代码的地方就会变得更加明显。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52803456
复制相关文章
相似问题
腾讯云开发者
