【React】React的懒加载组件lazy和Suspense

在一个多路由项目中，页面加载时，所有的路由组件都会被加载
如果我们有很多个路由组件，但是用户只点击了几个，这就会有很大的消耗，因此我们需要做懒加载处理，我们点击哪个时，才去加载哪一个
而React当然想到了这一点，给我们提供了LazyLoad。

用法

首先我们需要从 react 库中暴露一个 lazy 函数

import React, { Component ,lazy} from 'react';

然后我们需要更改引入组件的方式，作为懒加载组件引入

const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

路由组件加载需要时间，此时页面会白屏，需要指定一个loading组件作为新组件还没加载出来时的过渡，用Suspense包裹所有路由组件，在Suspense的fallback属性放入loading组件作为过渡

<Suspense fallback={<loading/>}>
    <Route path="/home" component={Home}></Route>
    <Route path="/about" component={About}></Route>
</Suspense>

注意： loading 必须提前引入，不能懒加载，否则就会陷入死循环
例：import Loading from ‘./Loading’

完整代码

import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'

// import Home from './Home'
// import About from './About'

import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))

export default class Demo extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
							<NavLink className="list-group-item" to="/about">About</NavLink>
							<NavLink className="list-group-item" to="/home">Home</NavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								<Suspense fallback={<Loading/>}>
									{/* 注册路由 */}
									<Route path="/about" component={About}/>
									<Route path="/home" component={Home}/>
								</Suspense>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}