全书目录

第一篇:React 完全指南 —— 空调宇宙

第二十章:Suspense + lazy —— 空调模块按需安装

1 分钟 84 字 第 42 / 962 个阅读单元

不是所有模块都要一上电就全部装好。比如“高级空气净化模块”,用户没点开之前,没必要立刻加载。

tsx
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 安装期间的临时提示牌