9

我想延迟加载我的组件以减少我的初始包大小并使用反应路由器使用代码拆分即时获取组件。

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

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

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

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

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

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

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

4

2 回答 2

2

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

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

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

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

于 2020-08-28T14:41:21.663 回答
1

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

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

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

<Suspense fallback={null}>
    <MyLazyComponent />
</Suspense>
于 2020-08-27T23:00:09.707 回答