React 性能问题别猜了，这个 21k Star 工具直接给你答案

React 性能问题别猜了，这个 21k Star 工具直接给你答案

React 项目做到一半页面突然变卡，你第一反应是打开 DevTools 录 Performance，还是满项目加 console.log 找那个”到底是谁在重渲染”的罪魁祸首？

如果你还在靠猜，那 react-scan 这个工具值得你花三分钟了解。

react-scan 是开发者 aidenybai 做的开源 React 性能扫描器，专门定位那些”看起来没问题但实际在悄悄浪费渲染”的场景。装完不用配置，直接在你的 React 应用里跑一遍，它会告诉你：

• 哪些组件在无关 state 变化时做了不必要的重渲染
• 哪些 memo 被 props 形状问题绕过了
• 哪些 effect 在你不希望它运行的时候触发了

上个月我在一个 Next.js 项目里实际用了一次，扫出来三个之前完全没注意到的性能坑：

• 一个列表项在父组件 state 变化时全体重渲染，哪怕包了 memo 也没拦住
• 一个消费了 context 的深层组件，导致整棵子树跟着无关更新一起刷新
• 一个动画 hook 每秒触发 60 次 effect，制造了大量无用计算

这些问题单独看都不致命，但叠在一起就是卡顿的根源。react-scan 直接把这些点标出来，连相关代码路径都给你指好，省掉了来回搜索的时间。

兼容 React 18、Next.js、Remix、Gatsby，主流框架全覆盖。MIT 协议，TypeScript 源码，21.7k Star 是实打实的开发者口碑，不是刷出来的。

如果你也在跟 React 性能问题缠斗，这个工具值得放进你的工具箱。

GitHub: https://github.com/aidenybai/react-scan

GitHub: https://github.com/aidenybai/react-scan