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