1. Suspenso
Enlace de referencia: https://react.docschina.org/reference/react/Suspense
suspenso: n. ansiedad, suspenso
<Suspense>Le permite mostrar un respaldo hasta que todos sus componentes secundarios hayan terminado de cargarse.
<Suspense fallback={
<Loading />}>
<SomeComponent />
</Suspense>
dos perezoso
La implementación de lazy es similar al código de implementación de asyncComponent de la siguiente manera:
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'))
}
}
注: Utilice import() para devolver una promesa después de la importación dinámica, pero puede obtener un componente renderizado directamente después de envolverlo en modo diferido.
