React 的“lazy”与 Typescript 和命名导出

React 的 lazy 函数是优化组件树渲染和内存使用的强大工具。例如，当处理根据某些触发器条件显示的模态框时，延迟加载可以极大地有益。虽然这些模态框可能在触发之前保持不可见，但它们仍存在于您的组件树中。如果这些模态框包含繁重的组件，即使用户当前未查看任何内容，所有这些组件也会加载到内存中。

示例：

<Modal
  isVisible={opened}
  onModalHide={onCancelPressed}
>
  {children}
</Modal>

为了避免不必要的加载并提高性能，您可以在需要显示模态框时进行延迟加载：

const Modal = lazy(() => 
  import("../path/to/Modal")
);

然而，您需要确保 Modal 是一个默认导出。如果不是默认导出，您的 IDE 将会警告您出现此错误：

TS2322 Property 'default' is missing in type 'typeof import("path/to/Modal")' but required in type '{ default: ComponentType; }'。

默认导出可能并不是您想要的。有时默认导出会使可搜索性变得困难，您的团队可能更喜欢命名导出。在这种情况下，您可以这样做：

const Modal = lazy(() => 
  import("../path/to/Modal")
  .then((module) => ({default: module.Modal})),
);

然后，这不仅允许您呈现模态框，还可以在需要时加载它：

{ opened ? <Modal /> : null}

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！