reactjs - 在初始页面加载后，是否可以将当前组件作为 React.Suspense 的 "fallback"内容挂载？

Question

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

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

谢谢你。

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

Answer 1

我写了一个组件，它接受你想要渲染的惰性组件并设置 <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} />