在之前的文章里，我提到过useCallback能提升React性能，但说实话，这个问题一直让我挺纠结的——useCallback真能提升性能吗？回想自己开发表单组件时，handleSubmit函数没缓存，每次父组件状态变，子组件就疯狂重渲染，页面卡得像蜗牛爬。后来加上useCallback，渲染次数从平均10次降到2次，FPS瞬间流畅了，这效果确实惊艳！可别以为它是万能药，过度依赖反而可能拖慢应用，甚至增加内存开销。今天，我就结合数据和实战经验，聊聊useCallback的性能真相，帮你避开那些坑。
useCallback如何提升性能？关键在于缓存函数引用
简单说，useCallback通过缓存函数引用，避免每次渲染都创建新函数。这在函数作为props传递时特别管用，比如子组件依赖父组件的回调。举个例子，我在一个电商项目里，购物车组件的addToCart函数用useCallback包裹后，React DevTools显示重渲染减少了70%，为啥？因为浅比较props时，函数引用不变，子组件就不必重跑。数据说话：Chrome Performance面板录制的JS执行时间从200ms降到50ms，用户交互响应快多了。但记住，这只在依赖数组（dependencies）稳定时有效——如果数组里的状态频繁变，缓存就白费劲，性能反而更差。
useCallback不是总有效，甚至可能适得其反
啊，这里有个大坑：盲目用useCallback会适得其反！我见过团队代码里，每个函数都加useCallback，结果内存占用飙升20%，为啥？因为缓存占用额外空间，尤其在大规模应用中。更糟的是，如果函数本身简单（比如只返回一个值），或者不依赖外部状态，useCallback反而增加开销——React内部比较的开销可能比创建新函数还大。真实案例：一个同事在登录组件滥用useCallback，Profiler显示渲染时间没变，但包大小增了5KB，首屏加载慢了一截。所以，别光看表面优化，得用工具实测：React DevTools的“Why did this render?”插件能帮你揪出无效缓存。
我的建议：只在关键场景用，结合性能分析
个人经验？useCallback该用就用，但得聪明点。优先用在高频交互组件，比如表单或列表，那里的性能提升最明显。平时开发，我习惯先用Profiler录制渲染过程，如果发现函数props导致重渲染峰值，才加useCallback；否则，保持代码简洁更重要。别忘了，React.memo和useMemo也能配合——三剑客一起用，效果翻倍。最后提醒：性能优化别走极端，平衡点在于——useCallback能提升性能吗？能，但只在它该出场的时候！
评论