网易有道 React 性能优化 3 大技巧

内容摘要
随着业务场景的复杂化，性能优化就变得格外重要，这一讲，我们从 React 源码入手，以有道精品课大前端的具体业务为例，运用 3 大优化技巧对系统进行“外科手术式”的优化，同时深入刨析 React Profiler，利用这款性能优化利器，帮我们定位性能瓶颈。

本课目录
React 的工作流
如何减少计算的量

• 优化 Render 过程
• 批量更新，减少 Render 次数

精细化渲染阶段

• 按优先级更新，及时响应用户
• 发布者订阅者跳过中间组件 Render 过程
• useMemo 返回虚拟 DOM 可跳过该组件 Render 过程

精确判断更新的“时机”和“范围”

• debounce、throttle 优化频繁触发的回调
• 懒加载与懒渲染
• 虚拟列表
• 避免在 didMount、didUpdate 中更新组件 State

React Profiler 使用心得

• Profiler 只记录了 Render 过程耗时
• 开启“记录组件更新原因”
• 定位产生本次 Render 过程原因

思维导图

讲师简介

安增平
网易有道资深前端开发工程师

深度学习与数据挖掘硕士，网易有道精品课 B 端前端负责人，专注于用户增长侧前端领域，擅长企业级前端架构与性能提升，知乎专栏作者（安大虎），“中台架构之家”微信公众号作者。


8 点一课
8 点一课是拉勾教育新出的栏目，每周一至周五早上 8 点更新一期，每期 10~30 分钟，旨在用碎片化的时间，快速、高效地帮你搞清楚一个热点、令人迷惑的小知识，日拱一卒，每天进步一点点。

内容版权声明：除非注明，否则皆为本站转载文章。文章及图片版权归原作者所有，如有侵权请联系我们，我们立刻删除。