现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

21|性能优化:保证优秀的用户体验

你好,我是宋一玮,欢迎回到 React 应用开发的学习。
上节课,我们学习了按业务功能划分为主,结合按组件、按文件职能划分目录结构的方式,从整体层面把握大中型 React 应用逻辑的扩展。同时,也强调了前端应用逻辑架构对应用逻辑扩展的指导作用。
至此,我们已经学习了大中型 React 项目的数据流、局部和整体逻辑的相关实践。
无论项目规模大小,我们作为优秀前端开发者,追求优秀的用户体验的脚步是不会停下来的。
如果想让我们的前端应用具有优秀的用户体验,一个必要条件是具备良好的性能。所以这节课,我们会暂时从应用业务开发中跳脱出来,将关注点放在应用性能上,了解一下常见的 React 性能问题和优化方案。

不要过早做性能优化

著名计算机科学家高德纳(Donald E. Knuth)在他的著作《计算机程序设计艺术》(TAOCP)中提出过:“过早优化是万恶之源(Premature Optimization is the Root of All Evil)。”强调了开发者在程序开发的早期阶段,有许多重要的工作要做,而优化程序这件事往往会占用了开发者过多的精力,却没能带来对等的收益。
当你在开发前端应用时,也可以参考这一原则。
第 6 节课讲虚拟 DOM 时,我曾提到 Svelte 作者对虚拟 DOM 技术的评价:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

React性能优化是前端开发中的重要议题。本文从性能问题的表现和根源入手,详细介绍了在React应用开发中如何进行性能优化。作者强调了不要过早进行性能优化,而是在遇到性能问题时再进行优化。文章列举了应用性能问题的表现,包括“慢”和“卡”两种情况,并提供了定位性能问题的根源和解决性能问题的方法。在解决性能问题方面,文章提到了为生产环境构建、避免不必要的渲染/重新渲染和代码分割等优化方式。通过具体的案例和分析,本文帮助读者了解了React应用中常见的性能问题和优化方案,为保证优秀的用户体验提供了指导。文章内容涵盖了React性能优化的闭环逻辑,以及与React紧密相关的性能问题的解决方案,对于前端开发者来说具有实际指导意义。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《现代 React Web 开发实战》
新⼈⾸单¥59
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部