GitHub 热门项目：react-scan

GitHub 项目：react-scan 仓库地址：https://github.com/aidenybai/react-scan 星级：21813 | 作者：aidenybai 项目描述：扫描并修复 React 性能问题 =================================================== 自述文件内容： # React 扫描 > **您仍然可以使用 React Scan，但我们推荐 React Doctor** > > React Doctor 将 React Scan 的性能重点引入编码代理，并对架构、安全性、可访问性等进行静态检查。 [尝试 React Doctor →](https://react.doctor) React Scan 会自动检测 React 应用程序中的性能问题。 - 无需更改代码——只需将其放入 - 准确突出显示您需要优化的组件 - 始终可以通过页面上的工具栏访问 ### 快速入门 ````bash npx -y 反应扫描@最新初始化 ```` ### [**尝试演示！ →**](https://react-scan.million.dev) <图片 src =“https://github.com/user-attachments/assets/c21b3afd-c7e8-458a-a760-9a027be7dc02” alt="React 扫描正在进行中" 宽度=“600” /> ## 安装 `init` 命令将自动检测您的框架，通过 npm 安装 `react-scan` 并设置您的项目。 ````bash npx -y 反应扫描@最新初始化 ```` ### 手动安装 安装包： ````bash npm install -D 反应扫描 ```` 然后将脚本标签添加到您的应用程序中。选择适合您的框架的指南： #### 脚本标签 将其粘贴到“index.html”中的任何脚本之前： ````html <脚本 交叉源=“匿名” src =“//unpkg.com/react-scan/dist/auto.global.js” > ```` #### Next.js（应用程序路由器） 将其添加到“app/layout.tsx”中： ````tsx 从“next/script”导入脚本； 导出默认函数 RootLayout({ Children }) { 返回（ <头> <脚本 src =“//unpkg.com/react-scan/dist/auto.global.js” 交叉源=“匿名” 策略=“交互之前” /> {孩子} ）； } ```` #### Next.js（页面路由器） 将其添加到您的“pages/_document.tsx”中： ````tsx 从“next/document”导入 { Html, Head, Main, NextScript }; 从“next/script”导入脚本； 导出默认函数 Document() { 返回（ <头部> <脚本 src =“//unpkg.com/react-scan/dist/auto.global.js” 交叉源=“匿名” 策略=“交互之前” /> <正文> <主要/> <下一个脚本/> ）； } ```` #### 维特 启用 React Scan 的示例“index.html”： ````html <头> <脚本 交叉源=“匿名” src =“//unpkg.com/react-scan/dist/auto.global.js” > <正文> <脚本类型=“模块”src=“/src/main.tsx”> ```` #### 混音 将其添加到您的“app/root.tsx”中： ````tsx 从“@remix-run/react”导入{链接、元、出口、脚本}； 导出默认函数 App() { 返回（ <头> <元/> <脚本 交叉源=“匿名” src="//unpkg.com