aidenybai/react-scan

这是什么？

核心功能

• 01在页面上高亮显示发生不必要重渲染的组件
• 02通过 script 标签接入时无需修改代码
• 03提供页面工具栏用于查看渲染情况
• 04提供 scan、useScan、setOptions 等 API 进行程序化控制
• 05可通过 onRender 监听指定组件的渲染
• 06提供浏览器扩展及 Next.js、Vite、Remix 等接入指南

适用场景

• 排查慢速 React 单页应用中多余的重渲染
• 开发阶段检查状态变化后哪些组件被重新渲染
• 审查 Next.js 或 Remix 项目中不必要的渲染开销
• 使用 onRender 追踪单个组件的渲染情况

快速上手

1. 1

   运行 init 命令，自动检测框架并完成配置

   npx -y react-scan@latest init
2. 2

   或者通过 npm 手动安装该包

   npm install -D react-scan
3. 3

   在应用中添加脚本标签（例如 index.html 中，位于所有脚本之前）

使用前须知

• !README 推荐改用 React Doctor，因此 React Scan 可能不再是重点开发方向。
• !手动配置需要添加脚本标签或框架专用代码，且脚本从 unpkg.com 加载。

标签

常见问题

react-scan 是什么？

一款自动检测并高亮标记不必要重渲染组件的 React 性能工具，无需修改代码。 React Scan 通过监控渲染过程，找出不必要重渲染的组件并高亮显示，帮助定位 React 应用中的性能问题。只需一个 script 标签或通过 npm 安装即可接入，无需修改应用代码。

react-scan 可以免费使用吗？用的什么许可证？

react-scan 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

react-scan 还在维护吗？

半年内有更新。react-scan 最近一次提交是在 2026年8月16日。

react-scan 适合用来做什么？

排查慢速 React 单页应用中多余的重渲染 开发阶段检查状态变化后哪些组件被重新渲染 审查 Next.js 或 Remix 项目中不必要的渲染开销 使用 onRender 追踪单个组件的渲染情况

react-scan 怎么安装和运行？

运行 init 命令，自动检测框架并完成配置: npx -y react-scan@latest init 或者通过 npm 手动安装该包: npm install -D react-scan 在应用中添加脚本标签（例如 index.html 中，位于所有脚本之前）

在哪里获取 react-scan？

源代码和安装说明在 GitHub 上：https://github.com/aidenybai/react-scan