React Suspense 延迟加载没有回退答案

【问题标题】：React Suspense lazy loading without fallbackReact Suspense 延迟加载没有回退
【发布时间】：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 (!!) 的任何路由创建加载器，顺便说一下，这会使延迟加载无用）。

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

【问题讨论】：

标签： javascript reactjs react-router lazy-loading react-suspense

【解决方案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 在并发模式下运行，因此功能请求已经已实现（并最终将成为稳定版）。

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

【讨论】：