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包裹后可以得到一个直接渲染的组件。

参考链接

相关推荐
naice9 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
小奋斗21 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
三小河39 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
Hilaku44 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小lan猫1 小时前
React学习笔记(一)
前端·react.js
云枫晖1 小时前
手写Promise-什么是Promise
前端·javascript
一枚前端小能手1 小时前
📋 前端复制那点事 - 5个实用技巧让你的复制功能更完美
前端·javascript
小高0072 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
东坡白菜2 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
小桥风满袖3 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript