React 之 Suspense和lazy

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

---

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

参考链接