大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
路由懒加载是什么意思?
在开发中 , 我们打开开发者工具, 会发现我们刚刚打开就会去加载所有页面.
路由懒加载就是只加载你当前点击的那个模块
按需去加载路由对应的资源, 可以提高加载速度 (一个页面加载过后再次访问不会重复加载)
实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容
方法一: 重写
首先, 新建一个asynccComponent.js , 作为公共js
import {Component as ReactComponet} from 'react'
import React from "react";
export default function asyncComponent(getComponent) {
return class AsyncComponent extends ReactComponet {
state = {Component: null}
componentDidMount() {
if (!this.state.Component) {
getComponent().then(Component => {
this.setState({Component})
})
}
}
render() {
const {Component} = this.state
if (Component) {
return <Component {...this.props} />
}
return null
}
}
}
然后写一个async-page.js 引入需要按需加载的页面
import asyncComponent from './async-component'
export default asyncComponent(async () => {
try {
const module = await import('./b')
return module.default
} catch (e) {
console.log(e);
}
return null
})
在index.js中
import React from 'react'
import { NavLink, Route } from 'react-router-dom'
import A from './async-page-a'
import B from './async-page-b'
export default class Lazy extends React.Component {
render () {
return (
<div>
<div>
<NavLink to="/a">A啦啦</NavLink>
<hr />
<NavLink to="/b">B啦啦</NavLink>
</div>
<div>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
</div>
</div>
)
}
}
方法二: lazy
- 1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const A = lazy(() => import('./a')) - 2.通过指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
<Switch>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
<Redirect to="/a"/>
</Switch>
</Suspense>
Redirect : 匹配不上所有的路由 就匹配Redirect 里的路由
Switch: 通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/185056.html原文链接：https://javaforall.net
