如何解决反应暂挂延迟加载而不会回退
我想延迟加载组件以减小初始捆绑包大小,并使用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在并发模式下运行,因此功能请求已经存在 已实施(最终将成为 稳定的版本)。
对我来说,等待是没有问题的,因此当前我将省略延迟加载路由,因为这涉及到一个爱好项目,并且我有时间等待将来的发布。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。