不是所有模块都要一上电就全部装好。比如“高级空气净化模块”,用户没点开之前,没必要立刻加载。
const AirPurifierPanel = lazy(() => import('./AirPurifierPanel'));
function SmartHome() {
const [showPurifier, setShowPurifier] = useState(false);
return (
<div>
<button onClick={() => setShowPurifier(true)}>打开空气净化模块</button>
{showPurifier && (
<Suspense fallback={<p>正在安装净化模块...</p>}>
<AirPurifierPanel />
</Suspense>
)}
</div>
);
}| 技术 | 类比 |
|---|---|
| lazy | 按需运送模块 |
| Suspense | 安装期间的临时提示牌 |