是否可以在初始页面加载后将当前组件保留为 React.Suspense 的“后备”内容？

Question

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

是否可以保持当前视图组件的安装状态，直到“延迟加载”组件准备好渲染为止？每个包都非常小，因此在呈现“后备”时，页面不可避免地会闪烁不到半秒。

谢谢。

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

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} />

Answer 2

你的意思是这样的吗？

我也在寻找正确的方法并尝试了很多方法。目前我最好的方法是每当呈现页面时更新回退，无论该页面是否延迟加载。所以后备必须是一个状态而不是类似的东西

    <div>Loading...</div> 

它必须是与当前呈现的页面相同的组件实例。 这是它的源代码。