React 之 Suspense和lazy

一. Suspense

参考链接:https://react.docschina.org/reference/react/Suspense

suspense:n. 焦虑、悬念

<Suspense> 允许你显示一个退路方案(fallback)直到它的所有子组件完成加载。

js 复制代码
<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

二. lazy

lazy的实现类似于如下asyncComponent的实现代码:

js 复制代码
function asyncComponent(importComponent) {
	class AsyncComonent extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				com: null
			}
		}
		async componentDidMount() {
			const { default: com } = await importComponent();
			this.setState({
				com
			});
		}
		render() {
			const C = this.state.com;
			return C ? <C ...{this.props} /> : null;
		}
	}

}
const routers = {
	demo: {
		path: '/homepage',
		renderComponent: asyncComponent(() => import('../homepage/main.jsx'))
	}
}

:使用import()动态导入后返回一个promise,但是通过lazy包裹后可以得到一个直接渲染的组件。

参考链接

相关推荐
前端君2 小时前
实现最大异步并发执行队列
javascript
知识分享小能手3 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队4 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军4 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy5 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿5 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL5 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉5 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~5 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng5 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript