跳至主要内容

[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>
  )
}