react笔记
关于react的路由懒加载
原因：路由懒加载主要是提高用户的体验感，加快页面加载的效率
路由懒加载有很多种方式，这里主要是讲使用load函数自己封装的加载组件
(1)主要是根据load函数进行加载react元素,load函数主要是根据lazy.js来进行加载的
lazy.js主要的内容如下
import React, { Component } from 'react';
export default function(loading){
return class extends Component {
constructor(props) {
super(props);
this.state = {
Com:null
}
}
async componentWillMount(){
let Com = await loading();
this.setState({
Com:Com.default?Com.default:null
})
}
render() {
let Com = this.state.Com;
return Com ? <Com/>:null
}
}
}
此页面主要是用来导出load（）函数
（2）需要在路由页面中使用导出的load函数
在route.js写入以下代码
import React, { Component } from 'react';
import {HashRouter as Router,Route,Switch} from 'react-router-dom'
import Load from '../router/lazy'
//引入组件实现路由的懒加载
let Header = Load(()=>import('../components/Header'))
let About = Load(()=>import('../components/About.js'))
class Routes extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<div className='route'>
<Router>
<Switch>
<Route path='/header' component={Header}></Route>
<Route path='/about' component={About}></Route>
</Switch>
</Router>
</div>
);
}
}
export default Routes;
