React Suspense 延迟加载没有回退

Posted 2023-02-21

【中文标题】React Suspense 延迟加载没有回退

【英文标题】：React Suspense lazy loading without fallback

【发布时间】：2020-12-16 20:47:33

【问题描述】：

我想延迟加载我的组件以减少我的初始包大小并使用 react 路由器使用代码拆分来动态获取组件。

但是，在使用 React Suspense 时，它​​们会强制您使用后备进行加载。 这行不通：

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

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

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

在我的例子中，html 对应于被加载的 react 组件。

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

我对“强迫”我们添加加载器有点不满，我不理解强制执行的决定背后的逻辑。

【参考方案1】：

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

fallback props 只是一个 React 元素，你可以设置为null。

const MyLazyComponent= React.lazy(() => import('./MyComponent'));

<Suspense fallback=null>
    <MyLazyComponent />
</Suspense>

【讨论】：

这没有帮助。它仍然呈现一些空的 div （或任何导致闪烁的东西）。我只是希望它完全跳过显示任何内容，并在组件可用时对其进行渲染。我已经在使用 webpack 进行代码拆分，效果很好。

【参考方案2】：

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

目前没有使用 React-Router / React 的干净解决方案。 然而，在使用并发模式的未来版本中可以预见到这一点。正如 Dan Abramov 所说：

关于您的具体功能要求，我想我可以重新构建它 略有不同。这不是你想要“可选的后备”，因为 这对新屏幕没有意义（我们必须展示 某物）。我相信您正在寻找的是一种跳过显示的方法 如果内容已经在 HTML 中，则回退。这正是如何 React 在并发模式下运行，因此功能请求已经 已实现（并最终将成为 稳定版）。

对我来说等待不是问题，所以目前我将省略延迟加载路线，因为这涉及到一个爱好项目，我有时间等待未来的发布。