Skip to main content

[ReactDoc] Suspense and Lazy

透過 Suspense 可以讓元件在 render 前先「等待」,目前 Suspense 仍然只支援搭配 React.lazy 來做到 dynamic loading 元件,但未來可能會支援 data fetching 的功能。

透過 dynamic imports 來達到 code-splitting 效果的方式可以參考 Code Splitting and Dynamic Imports

官方提到的 Best Practice 是:

  • 如果只是想做到 Code Splitting 的效果,只需使用 React.lazy
  • 如果要 dynamic loading 且在該元件未 render 完成前出現 loading 的提示(loading indicator)則使用:React.Suspense

React.lazy:作為 code splitting 使用

React.lazy @ React Top-Level API

透過 React.lazy() 讓你可以動態地載入一個元件,並且達到 code splitting 的效果,如此避免使用者下載那些可能用不到的元件,以減少第一次載入頁面是所需的 bundle size。

const SomeComponent = React.lazy(() => import('./SomeComponent'));

接著在要使用這個元件的地方,要用 <Suspense /> 把這個需要動態載入的元件包起來。

React.Suspense:想要看到 loading indicator 時

React.Suspense @ React Top-Level API

透過 <Suspense /> 可以真的還沒有 render 完成的元件來顯示載入的效果(loading indicator),目前 Suspense 只支援載入 dynamic loading 的元件,未來有計劃進一步處理 data fetching。

// https://reactjs.org/docs/react-api.html#reactsuspense

import { lazy, Suspsense } from 'react';
import Spinner from './Spinner';

// code-splitting
const OtherComponent = lazy(() => import('./SomeComponent'));

const MyComponent = () => {
return (
<Suspense fallback={<Spinner />}>
<div>
<OtherComponent />
</div>
</Suspense>
)
}