标准答案
- 先用浏览器 Performance、React DevTools Profiler 和业务指标确认问题发生在哪个交互。
- Profiler 能展示每次 commit 的耗时、参与渲染的组件和相对成本。
- 常见问题包括父组件大范围重渲染、长列表渲染、昂贵计算、Context 粒度过粗和不稳定 props。
- 优化手段包括状态下沉、组件拆分、memo、useMemo、useCallback、虚拟滚动和请求缓存。
- 优化后要复测同一交互，确认 commit 时间、渲染范围或用户感知延迟确实下降。
题目解析
这道题要强调测量优先。没有数据就加 memo，容易增加复杂度但收益很小。
Profiler 看到的是 React 渲染成本，不等于全部页面性能，还要结合网络、脚本执行、布局和绘制。
性能优化要围绕具体用户行为，例如输入卡顿、切 tab 慢、展开表格慢，而不是泛泛地减少所有重渲染。
代码示例
下面可以用 Profiler 包住高风险区域，记录实际渲染耗时。
TSX
function onRender(
id: string,
phase: 'mount' | 'update',
actualDuration: number
) {
reportMetric('react_render', { id, phase, actualDuration })
}
<Profiler id="UserTable" onRender={onRender}>
<UserTable rows={rows} />
</Profiler>常见误区
- 没有性能数据就开始到处加 memo 和 useCallback。
- 只看 React Profiler，忽略网络慢、图片大、布局抖动等非 React 问题。
- 优化后没有复测，无法证明改动真的改善了用户体验。