React动态import()--React.lazy

React动态import()

使用之前：

import { add } from './math';

console.log(add(16, 26));

使用之后：

import("./math").then(math => {
  console.log(math.add(16, 26));
});

React.lazy(fun)

fun是一个函数，fun动态调用 import()，返回一个 Promise。

使用之前：

import OtherComponent from './OtherComponent';

使用之后：

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

在组件首次渲染时，自动导入包含 OtherComponent 组件的包。

在 Suspense 组件中渲染 lazy 组件

Suspense 组件中的fallback 属性接受任何在组件加载过程中你想展示的 React 元素。如此可在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

import React, { Suspense } from 'react';

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

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

可以将 Suspense 组件置于懒加载组件之上的任何位置。甚至可以用一个 Suspense 组件包裹多个懒加载组件。

import React, { Suspense } from 'react';

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

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

React.lazy 和 Suspense 技术不支持服务端渲染。想要在使用服务端渲染的应用中使用，使用 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。