最近在优化一个中大型 React 项目,遇到了一些性能问题,想请教下各位的经验。 背景:
React 19 + TypeScript 使用了某主流 UI 组件库(Ant Design) 页面复杂度中等,有表格、表单、图表等
问题: 应用在某些场景下会有明显的卡顿感,比如:
输入框打字有延迟 列表滚动不流畅 弹窗打开/关闭有掉帧
我的疑问:
组件库的问题?
这些成熟的组件库内部实现是否会带来性能开销? 是不是应该考虑换成更轻量的组件库,甚至自己写?
React 重渲染机制?
是不是没用好 memo / useMemo / useCallback? 状态管理不合理导致大范围重渲染?
还是两者都有?
 | 1 laikicka 4 小时 14 分钟前 一般都是 全局状态滥用. 先用 React DevTools 看看吧. Ant Design 虽然性能比较差. 但是不太可能会有明显的卡顿感 (复杂度中等的情况下). |
 | 2 joshua7v 4 小时 4 分钟前 不好说，可以用 react scan 检查一下，文字输入的时候是否触发很多组件重渲染了 |
 | 3 molvqingtai 3 小时 13 分钟前 有试过 react compiler 吗，应该会修复一些性能问题 |
 | 4 Baymaxbowen 3 小时 2 分钟前 via iPhone 重复渲染吧 打开调试工具看看 |
 | 5 ssshooter 2 小时 23 分钟前 是一个组件写了几千行还嵌套了复杂子组件没 Memo 吧，这个情况下随便一个 setState 都会跑完整 render 就会卡 |
 | 6 Linho1219 2 小时 19 分钟前 via Android 去 DevTools 性能面板录一段看一下什么步骤耗时最长。你这给的信息太少了，有可能是 JS 长时间占用主线程，也可能是 reflow 太多，或者读 DOM 导致频繁的样式重算等等；另外去无痕模式试试，也有可能是插件的锅 |
 | 7 okakuyang 2 小时 9 分钟前 牵一发动全身，改了一个 State 结果整个树渲染一遍。 |
 | 8 LandCruiser 1 小时 29 分钟前 打字都卡就明显是数据的问题，可以从这个输入框绑定的变量入手排查。 |
Select Language