React Suspense 延迟加载，无需回退

Question

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

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

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

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

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

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

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

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

Answer 1

尝试在文档中使用代码分割

fallbackprops 只是一个 React 元素，您可以将其设置为null.

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

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

Answer 2

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

当前没有使用 React-Router / React 的干净解决方案。
然而，在使用并发模式的未来版本中可以预见到这一点。正如丹·阿布拉莫夫所说：

关于您的具体功能请求，我想我可以稍微不同地重新构建它。这并不是说您想要“可选后备”，因为这对于新屏幕来说没有意义（我们必须展示一些东西）。我相信您正在寻找的是一种在内容已经是 HTML 的情况下跳过显示后备的方法。这正是 React 在并发模式下的行为方式，因此功能请求已经实现（并且最终将成为稳定版本中的默认行为）。

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