← Back to tools
调试与性能免费
React Scan
自动高亮页面上发生重渲染的 React 组件，帮你定位性能问题。
#react#performance#rerender#devtools
Core value
不用手动加 profiler，直接看到哪些组件在多余地重渲染，省去猜测的时间。
Why we recommend it
接入几乎零成本，却能把抽象的"重渲染"变成肉眼可见的红框，是排查 React 性能的顺手工具。
Use cases
- 排查页面卡顿时找出反复重渲染的组件
- 验证 memo / useMemo 的优化是否真的生效
- 在开发环境里持续监控渲染开销
How to use
- 1通过脚本标签或 npm 引入到你的项目
- 2打开页面，观察被高亮的重渲染区域
- 3定位到反复渲染的组件和触发原因
- 4针对性地加缓存或拆分状态
Best for
- 遇到性能瓶颈的 React 工程师
- 想理解渲染行为的学习者
- 维护大型前端应用的团队