反应暂挂延迟加载而不会回退

编程问答 2022-08-14

问题描述

我想延迟加载组件以减小初始捆绑包大小，并使用React Router通过代码拆分即时获取组件。

但是，当使用React Suspense时，它们会迫使您使用后备进行加载。
这是行不通的：

const lazyLoadComponent = Component =>
    props => (
        <Suspense> // Missing fallback property
            <Component {...props} />
        </Suspense>
    );

在我的情况下，我正在从服务器渲染html，所以我不想使用微调器。
这会在我的屏幕上造成无用的闪烁！ 即：

  • HTML加载
  • 出现占位符
  • 该路线的PageComponent已加载
  • 我有自己的微调器，可从页面组件中加载提要

在我的情况下，html对应于已加载的react组件。

是否有任何已知的技巧可以轻松解决此问题（除了为复制html（!!）的任何路由创建加载程序外，顺便说一下，这会使延迟加载变得无用）。

我对“强迫”我们添加装载程序有点不满意，我不明白将其强制设为决定背后的逻辑。

解决方法

尝试在the docs中使用代码拆分

fallback道具只是一个React元素，您可以将其设置为null。

<Suspense fallback={null}>
    <ComponentImportedByLazy />
</Suspense>
,

我为此在Github上创建了一个问题：https://github.com/facebook/react/issues/19715

当前没有使用React-Router / React的全新解决方案。
但是，在将来的使用并发模式的版本中可以预见到这一点。如Dan Abramov所述：

关于您的具体功能要求，我认为我可以重新设计 略有不同。您并不是要“可选的备用广告”，因为 这对于新屏幕是没有意义的（我们必须展示 东西）。我相信您正在寻找的是一种跳过显示的方式 如果内容已经是HTML，则进行备用。正是这样 React在并发模式下运行，因此功能请求已经存在 已实施（最终将成为 稳定的版本）。

对我来说，等待是没有问题的，因此当前我将省略延迟加载路由，因为这涉及到一个爱好项目，并且我有时间等待将来的发布。

javascriptreact-routerreact-suspensereactjsreactjsreactjsreactjs