React Suspense & lazy

引言

代码分割是为了解决代码包过大导致加载缓慢的问题，通过将代码“分块”，懒加载部分块，使得初始加载的时候只需加载少量代码，避免加载用户永远不需要的代码。

Suspense 和 React.lazy 就是实现代码分割的有效方式

Suspense 和 React.lazy 的使用

懒加载 OtherComponent 组件，在组件加载的过程中，显示<div>Loading…</div>

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

React.lazy(() => import('./OtherComponent'))就是import OtherComponent from './OtherComponent'的懒加载版本

用<Suspense>标签将 lazy 组件包裹起来，可以包裹多个

fallback 属性接受任何在组件加载过程中你想展示的 React 元素