异步挂载函数是一种将组件延迟到实际需要时动态加载的方法。基于 React,可以使用 lazy
函数和 Suspense
组件轻松实现异步挂载。示例如下:
import React, { lazy, Suspense } from 'react';
// 异步加载组件
const AsyncComponent = lazy(() => import('./path/to/component'));
function App() {
return (
My App
Loading... }>
在示例中,lazy
函数动态导入组件,而 Suspense
组件则在加载组件时显示一个 loading 界面。使用这种方法,可以显著提高应用程序的性能,同时避免不必要的组件加载。