异步组件

Posted on Aug 24, 2022

利用 React.lazy 将普通组件改造为异步组件

const Todo = React.lazy(
  () => new Promise<{ default: React.ComponentType<any> }>(async (resolve) => {
    const module = await import("./Todo");
    db.read("todos").then((t) => {
      resolve({
        ...module,
        default: module.default(todos) as unknown as React.ComponentType<any>,
      });
    });
  })
);

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

通常 React.lazy 只是用于异步加载组件。

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

import 返回的是一个 Promise<{ default: React.ComponentType<any> }>。只有我们自己构建一个能返回该类型的Promise，在返回Promise之前就可以做一些异步请求数据或初始化之类的操作。