继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

轻松解决react组件懒加载

幕布斯7119047
关注TA
已关注
手记 432
粉丝 28
获赞 102

    今天给大家说说react组件懒加载的问题,希望对各位程序员同学有所帮助。

    React.lazy 接受一个函数,这个函数需要动态调用 import()。它必须返回一个 Promise,该 Promise 需要 resolve 一个 default export 的 React 组件。然后应在 Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等)。

    fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

http://img4.mukewang.com/62a706b900013b8709270573.jpg

    如果模块加载失败(如网络问题),它会触发一个错误。你可以通过异常捕获边界技术来处理这些情况,以显示良好的用户体验并管理恢复事宜。 

    好啦,关于react组件懒加载的问题就说到这里,还有问题的同学可以在评论区留言~

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP