1. Suspense
Reference link: https://react.docschina.org/reference/react/Suspense
suspense: n. anxiety, suspense
<Suspense>Allows you to display a fallback until all of its child components have finished loading.
<Suspense fallback={
<Loading />}>
<SomeComponent />
</Suspense>
Two. lazy
The implementation of lazy is similar to the implementation code of asyncComponent as follows:
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'))
}
}
注: Use import() to return a promise after dynamic import, but you can get a directly rendered component after wrapping it in lazy.
