先定位后优化。借助 React DevTools Profiler 找到真正频繁重渲染的组件,再决定是否使用 memo、useMemo 或 useCallback。
列表渲染时优先保证 key 稳定,其次考虑虚拟列表。不要用数组下标作为 key,避免排序后状态错位。
接口请求要做去重、缓存与并发控制。对于高频触发场景,可结合防抖节流减少无效请求。
最后用 Lighthouse 与 Web Vitals 做回归,确保优化不只是体感而是真实指标提升。
文章标签
React性能优化前端工程化
SorryToPerson
个人博客 · 面试题 · 项目沉淀
先定位后优化。借助 React DevTools Profiler 找到真正频繁重渲染的组件,再决定是否使用 memo、useMemo 或 useCallback。
列表渲染时优先保证 key 稳定,其次考虑虚拟列表。不要用数组下标作为 key,避免排序后状态错位。
接口请求要做去重、缓存与并发控制。对于高频触发场景,可结合防抖节流减少无效请求。
最后用 Lighthouse 与 Web Vitals 做回归,确保优化不只是体感而是真实指标提升。
文章标签