React中路由懒加载与Suspense
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React中路由懒加载与Suspense相关的知识,希望对你有一定的参考价值。
参考技术A 1、suspense可以包含多个需要懒加载的文件2、fallback属性可以接受在组件加载过程中你要展示的任何react元素
react懒加载(lazy, Suspense)
文章目录
一、参考
二、API 介绍
2.1 React.lazy()
-
React.lazy 接受一个函数,这个函数需要动态调用 import()。
-
它必须返回一个 Promise,该 Promise 需要 resolve 一个 default export 的 React 组件。
使用之前:
import OtherComponent from './OtherComponent';
使用之后:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
2.2 <Suspense> 组件
-
React.lazy() 加载的组件只能在 组件中渲染
目的:使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等)。
-
fallback 属性
接受任何在组件
加载过程中
你想展示的 React 元素。即在加载异步组件显示之前先显示的内容
三、案例
3.1 配合路由使用
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>
)
3.2 官方例子
import React, Suspense from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent()
return (
<div>
<Suspense fallback=<div>Loading...</div>>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
四、注意
React.lazy 和 Suspense 技术还不支持服务端渲染。
以上是关于React中路由懒加载与Suspense的主要内容,如果未能解决你的问题,请参考以下文章