React 之 Suspense和lazy

最新推荐文章于 2025-04-21 09:56:10 发布

. . . . .

最新推荐文章于 2025-04-21 09:56:10 发布

阅读量1.4k

点赞数 1

分类专栏： React 文章标签： react.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/yexudengzhidao/article/details/132245120

版权

React 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了React中的Suspense特性，用于处理组件加载期间的用户体验，以及lazy属性实现动态导入并延迟加载组件，提升首屏渲染速度。通过展示fallback方案和asyncComponent示例，展示了如何在实际项目中应用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. Suspense

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

suspense：n. 焦虑、悬念

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

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

二. lazy

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

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'))
	}
}