携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
React的路由懒加载
之前路由懒加载通过react-loadable
说白了路由懒加载其实就是基于路由的代码分割
import Loadable from 'react-loadable';
import Loading from './my-loading-component';
const LoadableComponent = Loadable({
loader: () => import('./my-component'),
loading: Loading,
});
export default class App extends React.Component {
render() {
return <LoadableComponent/>;
}
}
现在可通过
React.Suspense与React.lazy来实现
-
React.suspense用来实现懒加载路由时的loading兜底fallback参数中可以传入react组件或dom元素- 例如：
<div>Loading...</div> - 注意：
React.suspense不只是针对于懒加载的路由，而针对所有懒加载的组件，只要是存在懒加载的，都可以通过在外成包裹React.suspense来实现loading或其他占位dom
-
React.lazy用来包装组件路径，实现路由懒加载-
例如：
const LazyDemoPage1 = lazy(() => import("@pages/DemoPage1")); -
注意：
React.lazy目前只支持默认导出(default exports)
-
更多可以参考React的代码分割
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
