[TOC] ## Suspense 允许在子组件完成加载前展示后备方案。 - 由于一个普通的组件不支持 await/async 语法 ``` <Suspense fallback={<Loading />}> <SomeComponent /> </Suspense> ``` ## 示例 ``` async function SuspendedApp() { await sleep(1000); return <div>函数组件</div> } export default function Demo() { const [a, setA] = useState('a'); const b = useDeferredValue(a); return <div> <Suspense fallback={<div>loading</div>}> <SuspendedApp /> </Suspense> <button onClick={() => setA('b')}>change</button> </div> } // add sleep function function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } ``` > SuspendedApp 会在 1秒后显示