时间戳

首页 > 解决方案 > 在初始页面加载后，是否可以将当前组件作为 React.Suspense 的“后备”内容安装？

reactjs - 在初始页面加载后，是否可以将当前组件作为 React.Suspense 的“后备”内容安装？

问题描述

我使用动态import()语法将每个路由组件拆分为一个单独的包，并React.lazy仅在需要时加载组件。我有一个PageLoading组件作为<React.Suspense />.

是否可以在“延迟加载”组件准备好渲染之前保持当前视图组件的安装状态？这些捆绑包单独很小，因此在呈现“后备”时页面不可避免地会闪烁不到半秒。

谢谢你。

编辑：我不想制造人为的延迟。我所要求的正是我所描述的。

标签： reactjs

解决方案

我写了一个组件，它接受你想要渲染的惰性组件，并将 fallback 属性设置<Suspense />为之前渲染的组件：

import * as React from 'react';

export type LazyProps = {
  component: React.LazyExoticComponent<() => JSX.Element>;
  initialFallback?: JSX.Element;
};

export const Lazy = ({ component, initialFallback = <></> }: LazyProps): JSX.Element => {
  const fallback = React.useRef(() => initialFallback);
  const Component = component;

  const updateFallback = async (): Promise<void> => {
    const result = await component._result;
    fallback.current = typeof result === 'function' ? result : (result as any).default;
  };

  React.useEffect(() => {
    updateFallback();
  }, [component]);

  return (
    <React.Suspense fallback={<fallback.current />}>
      <Component />
    </React.Suspense>
  );
};

可以这样使用：

<Lazy component={MyLazyComponent} />

推荐阅读