版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Juniorselk/article/details/78931222
export default function asyncComponent(importComponent){ class AsynccComponent extends React.Component{ constructor(props){ super(props); this.state = { component:null } } async componentDidMount(){ const {default:component } = await importComponent(); this.setState({ component:component }); } render(){ const C = this.state.component; return C ? <C {...this.props}/>: <ActivityIndicator toast text="加载中..." animating={true} />; } } return AsynccComponent }
ActivityIndicator是加载动画
在引入路由组件的时候,按照以下格式引入
const AppealChangeBindPhone = asyncComponent( () => import( './user/components/user/UserCenter/set/changeBindPhone/AppealChangeBindPhone'));
这里按需加载后,放到服务器后有时会出现页面未加载出来时候的白屏问题。控制台会报Loading chunk 28 faild错误。根据分析应该是DNS劫持的问题。
解决方案是加https。