react 异步组件加载lazy与Suspense

93 阅读 0 评论 62 点赞

我是靠谱客的博主欣喜康乃馨，这篇文章主要介绍react 异步组件加载lazy与Suspense，现在分享给大家，希望可以做个参考。

场景，组件异步渲染期间懒加载，组件加载失败情况

lazy需要与Suspense配合使用
Suspense填充状态
fallback请求组件期间还没全部加载完成时显示的内容，需要传入组件实例，例如传入组件，例如 fallback={<loading/>}
getDerivedStateFromError /componentDidCatch 错误捕获
复制代码import React, { lazy, Suspense, Component } from 'react'; //lazy异步加载 Suspense填充状态 // const LazyTemplate = lazy(() => import('./lazy/1.jsx')) //异步加载组件在network中可以看到curstomName.chunk.js请求，也就是加载的组件 const LazyTemplate = lazy(() => import(/*webpackChunkName:'curstomName'*/'./index2')) class SuspenseDemo extends Component { state = { errorStatus: false } static getDerivedStateFromError() { return { errorStatus: true } } //同上方式 // componentDidCatch() { // this.setState({ // errorStatus: true // }) // } render() { if (this.state.errorStatus) { return <div>异步请求失败</div> } return ( <div> <Suspense fallback={<div>loading</div>}> <LazyTemplate></LazyTemplate></Suspense> </div > ); } } export default SuspenseDemo;
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { lazy, Suspense, Component } from 'react';
//lazy异步加载 Suspense填充状态
// const LazyTemplate = lazy(() => import('./lazy/1.jsx'))
//异步加载组件
在network中可以看到curstomName.chunk.js请求，也就是加载的组件
const LazyTemplate = lazy(() => import(/*webpackChunkName:'curstomName'*/'./index2'))
class SuspenseDemo extends Component {
state = {
errorStatus: false
}
static getDerivedStateFromError() {
return {
errorStatus: true
}
}
//同上方式
// componentDidCatch() {
//
this.setState({
//
errorStatus: true
//
})
// }
render() {
if (this.state.errorStatus) {
return <div>异步请求失败</div>
}
return (
<div>
<Suspense fallback={<div>loading</div>}> <LazyTemplate></LazyTemplate></Suspense>
</div >
);
}
}
export default SuspenseDemo;
```
index2
复制代码import React, { Component, } from 'react' export default function SuspenseDemo2() { return <div>异步请求组件</div> }
```
1
2
3
4
5
import React, { Component, } from 'react'
export default function SuspenseDemo2() {
return <div>异步请求组件</div>
}
```