03.md

React Lazy and Suspense

React.lazy

React 在 16.6.0 發表了 React.lazy 功能，此功能可以讓 React 不用額外的 package 之下實現 lazy loading。之前需要用到 react-loadable 來達到此功能。

Suspense

Suspense 是使用 React.lazy 的必要元件，通常用來包住需要被延遲加載的元件，Suspense 提供了一個 callback，此 callback 用來當元件延遲加載時顯示其他元件用的。

延遲加載的重要性

通常打包工具會將 javascript 打包成一個檔案，隨著檔案大小的增加而造成下載變慢，直接影響到使用者體驗。 若是透過延遲加載技術將原本一個 javascript 檔分割成數個檔案，只需要加載需要的檔案，這樣體驗就會好上不好。

Demo

import ChildComponent from './ChildComponent';

const App = () => {
  return (
    <div>
      <ChildComponent />
    </div>
  );
}

上面是一個簡單的 React app，裡面就包裹一個 ChildComponent。若如果 ChildComponent 裡面的資料太大，則檔案在下載時會需要一段時間，造成使用者體驗不佳。

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

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <ChildComponent />
      </Suspense>
    </div>
  );
}

上面只有將 ChildComponent 使用 React.lazy() import 近來，並且將 ChildComponent 使用 Suspense 包住，fallback 給他一個 Loading 中的 component。這樣就可以達到目的了。

---

Reference

1. https://juejin.im/post/5c60e1d2f265da2dd16843f6

tags: React Lazy Suspense

---