{"_id":"@ddll/react-performance-monitor","_rev":"4-d6aa935678693e4d286cb1f1da01d030","name":"@ddll/react-performance-monitor","dist-tags":{"latest":"1.0.0-beta3"},"versions":{"1.0.0":{"name":"@ddll/react-performance-monitor","version":"1.0.0","keywords":["react","performance","monitor","profiler","memory-leak","performance-monitoring","react-hooks"],"license":"MIT","_id":"@ddll/react-performance-monitor@1.0.0","maintainers":[{"name":"ddll","email":"2427299814@qq.com"}],"homepage":"https://github.com/your-username/promote/tree/main/知识库/packages/react-performance-monitor","bugs":{"url":"https://github.com/your-username/promote/issues"},"dist":{"shasum":"ba5d0e2ff4e2de5a766fac8f9e56669d83ccb7d2","tarball":"https://registry.npmjs.org/@ddll/react-performance-monitor/-/react-performance-monitor-1.0.0.tgz","fileCount":7,"integrity":"sha512-HXN/AsK3qsAdcn6fyxhKON/PgMHdRORLK4RxdXS1trrBqOW2BCgMk6AOKVwCv7GsP6gPiQ+60Fke9K+sLR+GAw==","signatures":[{"sig":"MEQCIBMogAiLM/tmdal5y3yEk7ktw9gNWNvyQIb3XJeMuK37AiAZ5RgBB/ob/s4D3dK0gnuckg71w4mCjwCiS+okeUkaGA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26345},"main":"index.js","engines":{"node":">=14"},"gitHead":"da5dd443066c8be09816a7038d3d6e007fb5918a","_npmUser":{"name":"ddll","email":"2427299814@qq.com"},"repository":{"url":"git+https://github.com/your-username/promote.git","type":"git","directory":"知识库/packages/react-performance-monitor"},"_npmVersion":"10.8.2","description":"React 性能监控工具包 - 监控组件渲染、内存泄漏、DOM 变更等性能问题","directories":{},"_nodeVersion":"20.19.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-performance-monitor_1.0.0_1766112995303_0.8859107503855315","host":"s3://npm-registry-packages-npm-production"}},"1.0.0-beta1":{"name":"@ddll/react-performance-monitor","version":"1.0.0-beta1","keywords":["react","performance","monitor","profiler","memory-leak","performance-monitoring","react-hooks"],"license":"MIT","_id":"@ddll/react-performance-monitor@1.0.0-beta1","maintainers":[{"name":"ddll","email":"2427299814@qq.com"}],"homepage":"https://github.com/your-username/promote/tree/main/知识库/packages/react-performance-monitor","bugs":{"url":"https://github.com/your-username/promote/issues"},"dist":{"shasum":"0b1758cd068e5d9972eb128a5c5d4782ff6f24d0","tarball":"https://registry.npmjs.org/@ddll/react-performance-monitor/-/react-performance-monitor-1.0.0-beta1.tgz","fileCount":8,"integrity":"sha512-/GXRj/SOtP1IEg15/O1ZWgJO0/LYYuxgL/BQzsJvmkqYCjy6G+fN7wCqBoYrOKxbjrEQOX2ZGolTOqKqVhzBGQ==","signatures":[{"sig":"MEUCIQDQ8ilZh/KPZtIeSmk1x1XAQy+e2VheNzimqMZuDPOBwQIgcu9uuT18fz00ZODSoZgqb1h7VddDmiwGGmzw8gD1jl8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39566},"main":"index.js","engines":{"node":">=14"},"gitHead":"da5dd443066c8be09816a7038d3d6e007fb5918a","_npmUser":{"name":"ddll","email":"2427299814@qq.com"},"repository":{"url":"git+https://github.com/your-username/promote.git","type":"git","directory":"知识库/packages/react-performance-monitor"},"_npmVersion":"10.8.2","description":"React 性能监控工具包 - 监控组件渲染、内存泄漏、DOM 变更等性能问题","directories":{},"_nodeVersion":"20.19.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-performance-monitor_1.0.0-beta1_1766114279294_0.37011090839352034","host":"s3://npm-registry-packages-npm-production"}},"1.0.0-beta2":{"name":"@ddll/react-performance-monitor","version":"1.0.0-beta2","keywords":["react","performance","monitor","profiler","memory-leak","performance-monitoring","react-hooks"],"license":"MIT","_id":"@ddll/react-performance-monitor@1.0.0-beta2","maintainers":[{"name":"ddll","email":"2427299814@qq.com"}],"homepage":"https://github.com/your-username/promote/tree/main/知识库/packages/react-performance-monitor","bugs":{"url":"https://github.com/your-username/promote/issues"},"dist":{"shasum":"3bba482a428722c1ad6c0441b7dae3ce473098d0","tarball":"https://registry.npmjs.org/@ddll/react-performance-monitor/-/react-performance-monitor-1.0.0-beta2.tgz","fileCount":33,"integrity":"sha512-sKW1S78CLqmiTXkSdZ5lY9j/PW0+3bkG8laeU4GaAyqJ8/UlIDK5S86C2mNkoPRNjn3nho7mrqyCdBuaUO4gSQ==","signatures":[{"sig":"MEYCIQDKhP8BrPlKRGFUOoT+rpB/WfBdctnVXp4AnSOATL86JAIhAPC5vFA7Ovkx5y0YjKIZfJFLSEGva8lsqrMSaUqLsP2q","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90506},"main":"index.js","engines":{"node":">=14"},"gitHead":"da5dd443066c8be09816a7038d3d6e007fb5918a","_npmUser":{"name":"ddll","email":"2427299814@qq.com"},"repository":{"url":"git+https://github.com/your-username/promote.git","type":"git","directory":"知识库/packages/react-performance-monitor"},"_npmVersion":"10.8.2","description":"React 性能监控工具包 - 监控组件渲染、内存泄漏、DOM 变更等性能问题","directories":{},"_nodeVersion":"20.19.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-performance-monitor_1.0.0-beta2_1766132720952_0.4032139784048703","host":"s3://npm-registry-packages-npm-production"}},"1.0.0-beta3":{"name":"@ddll/react-performance-monitor","version":"1.0.0-beta3","description":"React 性能监控工具包 - 监控组件渲染、内存泄漏、DOM 变更等性能问题","main":"index.js","license":"MIT","publishConfig":{"access":"public"},"keywords":["react","performance","monitor","profiler","memory-leak","performance-monitoring","react-hooks"],"engines":{"node":">=14"},"peerDependencies":{"react":">=16.8.0"},"repository":{"type":"git","url":"git+https://github.com/your-username/promote.git","directory":"知识库/packages/react-performance-monitor"},"bugs":{"url":"https://github.com/your-username/promote/issues"},"homepage":"https://github.com/your-username/promote/tree/main/知识库/packages/react-performance-monitor","_id":"@ddll/react-performance-monitor@1.0.0-beta3","gitHead":"da5dd443066c8be09816a7038d3d6e007fb5918a","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-CTTZ7oHbkD/eDD9o76NIgj6AKYcg40Cs7eOGJcadPaglmpkxD10sTfW7OGT0Xs0CXvSpUfqSwWXHJE57XtXe4A==","shasum":"7910b998f1fc1fb75b6ffce4e8d3adc0361ef8ce","tarball":"https://registry.npmjs.org/@ddll/react-performance-monitor/-/react-performance-monitor-1.0.0-beta3.tgz","fileCount":33,"unpackedSize":91866,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICvjgiZjjR82traisJVD4YdFQsCgddB7TLsfJDvJ+RYcAiBG/RCciWBxG4txBzzJK8uICiuw+jgKJnVeIDnF7nrYkA=="}]},"_npmUser":{"name":"ddll","email":"2427299814@qq.com"},"directories":{},"maintainers":[{"name":"ddll","email":"2427299814@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-performance-monitor_1.0.0-beta3_1766133458361_0.8618993244210422"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-19T02:56:35.199Z","modified":"2025-12-19T08:37:38.696Z","1.0.0":"2025-12-19T02:56:35.458Z","1.0.0-beta1":"2025-12-19T03:17:59.451Z","1.0.0-beta2":"2025-12-19T08:25:22.330Z","1.0.0-beta3":"2025-12-19T08:37:38.515Z"},"bugs":{"url":"https://github.com/your-username/promote/issues"},"license":"MIT","homepage":"https://github.com/your-username/promote/tree/main/知识库/packages/react-performance-monitor","keywords":["react","performance","monitor","profiler","memory-leak","performance-monitoring","react-hooks"],"repository":{"type":"git","url":"git+https://github.com/your-username/promote.git","directory":"知识库/packages/react-performance-monitor"},"description":"React 性能监控工具包 - 监控组件渲染、内存泄漏、DOM 变更等性能问题","maintainers":[{"name":"ddll","email":"2427299814@qq.com"}],"readme":"# React 性能监控工具包\n\n一个可在任何 React 项目中使用的性能监控解决方案，帮助在开发环境快速发现性能问题。\n\n## 特性\n\n- ✅ **零外部依赖**：核心功能仅依赖 React，无其他依赖\n- ✅ **轻量级**：体积小，不影响生产环境性能\n- ✅ **易于集成**：提供 Hook 和 HOC 两种使用方式\n- ✅ **功能完整**：监控渲染、内存、DOM 变更\n- ✅ **可配置**：支持自定义阈值和回调\n- ✅ **TypeScript 友好**：完整的 JSDoc 注释\n\n## 安装\n\n### npm / yarn / pnpm\n\n```bash\nnpm install @ddll/react-performance-monitor\n# 或\nyarn add @ddll/react-performance-monitor\n# 或\npnpm add @ddll/react-performance-monitor\n```\n\n### 本地开发（link 方式）\n\n```bash\npnpm --dir \"项目路径\" add \"@ddll/react-performance-monitor@link:知识库/packages/react-performance-monitor\"\n```\n\n### 手动复制\n\n将 `react-performance-monitor` 目录复制到你的项目中。\n\n## 快速开始\n\n### 方式一：使用 Provider 组件（推荐，最简单）\n\n最简单的使用方式，只需包裹你的应用：\n\n```jsx\nimport { PerformanceMonitorProvider } from '@ddll/react-performance-monitor'\n\nfunction App() {\n return (\n \n \n \n )\n}\n```\n\n**特性**：\n- ✅ 自动启用（开发环境默认启用）\n- ✅ 自动启动监控\n- ✅ 可选的控制面板（纯 HTML/CSS，无依赖）\n- ✅ 零配置即可使用\n\n### 方式二：使用 Logger 组件（带日志面板）\n\n使用 Hook 方式，提供日志显示面板：\n\n```jsx\nimport { PerformanceMonitorLogger } from '@ddll/react-performance-monitor'\n\nfunction App() {\n return (\n <>\n \n \n \n )\n}\n```\n\n**特性**：\n- ✅ 使用 Hook 方式，不包裹子组件\n- ✅ 内置日志收集和显示\n- ✅ 实时显示性能警告\n- ✅ 可展开/收起的日志面板\n- ✅ 多个标签页：日志、渲染统计、内存、DOM\n\n### 方式三：使用 Hook（灵活控制）\n\n需要更灵活的控制时使用：\n\n```jsx\nimport { useReactPerformanceMonitor } from '@ddll/react-performance-monitor'\n\nfunction App() {\n const { ComponentProfiler, monitorActive, startMonitor, stopMonitor } = useReactPerformanceMonitor()\n\n return (\n
\n \n \n \n \n \n \n
\n )\n}\n```\n\n### 方式四：使用带日志的 Hook\n\n需要收集日志但不想使用组件时：\n\n```jsx\nimport { usePerformanceMonitorWithLogger } from '@ddll/react-performance-monitor'\n\nfunction App() {\n const {\n ComponentProfiler,\n monitorActive,\n logs,\n clearLogs,\n } = usePerformanceMonitorWithLogger({\n maxLogs: 100,\n onLog: (log) => {\n console.log('性能警告:', log)\n },\n })\n\n return (\n
\n \n \n \n \n {/* 自定义日志显示 */}\n
\n {logs.map(log => (\n
{log.message}
\n ))}\n
\n
\n )\n}\n```\n\n### 配置选项\n\n```jsx\nconst { ComponentProfiler } = useReactPerformanceMonitor({\n // 启用/禁用监控模块\n enableMemoryMonitor: true,\n enableDOMMonitor: true,\n enableRenderMonitor: true,\n \n // DOM 监控的根节点选择器（可选）\n // 如果不指定，默认尝试 #root 或 #app，如果都找不到则使用 document.body\n domRootSelector: '#root', // 例如: '#root', '#app', '.app-container' 等\n \n // 内存检查间隔（毫秒）\n memoryCheckInterval: 5000,\n \n // 警告阈值\n warnThreshold: {\n renderCount: 50, // 组件渲染超过50次警告\n renderTime: 16, // 单次渲染超过16ms警告\n memoryIncrease: 10, // 内存增长超过10MB警告\n domMutations: 100, // 1秒内DOM变更超过100次警告\n },\n \n // 自定义警告回调\n onWarning: (warning) => {\n console.log('性能警告:', warning)\n // 可以发送到监控平台\n },\n \n // 自定义日志（可选）\n logger: {\n log: (...args) => console.log(...args),\n warn: (...args) => console.warn(...args),\n error: (...args) => console.error(...args),\n },\n})\n```\n\n### 使用 HOC 方式\n\n```jsx\nimport { withProfiler, ReactPerformanceMonitor } from '@ddll/react-performance-monitor'\n\n// 创建监控实例\nconst monitor = new ReactPerformanceMonitor({\n enableRenderMonitor: true,\n})\nmonitor.init()\n\n// 包装组件\nconst MonitoredComponent = withProfiler(MyComponent, monitor)\n\n// 使用\nfunction App() {\n return \n}\n```\n\n### 获取性能报告\n\n```jsx\nimport { useReactPerformanceMonitor, useMonitorReport } from '@ddll/react-performance-monitor'\n\nfunction App() {\n const { ComponentProfiler, monitorActive, getReport } = useReactPerformanceMonitor()\n const { report } = useMonitorReport(monitorActive, getReport)\n \n return (\n
\n \n \n \n \n {report && (\n
\n

渲染统计

\n 
{JSON.stringify(report.renders, null, 2)}
\n \n

内存统计

\n 
{JSON.stringify(report.memory, null, 2)}
\n \n

DOM 统计

\n 
{JSON.stringify(report.dom, null, 2)}
\n
\n )}\n
\n )\n}\n```\n\n## API 文档\n\n### `PerformanceMonitorProvider`\n\n性能监控提供者组件，最简单的使用方式。\n\n**Props:**\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `children` | `React.ReactNode` | - | 子组件（必需） |\n| `enabled` | `boolean` | `process.env.NODE_ENV === 'development'` | 是否启用监控 |\n| `autoStart` | `boolean` | `true` | 是否自动启动监控 |\n| `showControlPanel` | `boolean` | `false` | 是否显示控制面板 |\n| `componentId` | `string` | `'App'` | 组件 ID |\n| `enableMemoryMonitor` | `boolean` | `true` | 是否启用内存监控 |\n| `enableDOMMonitor` | `boolean` | `true` | 是否启用 DOM 监控 |\n| `enableRenderMonitor` | `boolean` | `true` | 是否启用渲染监控 |\n| `memoryCheckInterval` | `number` | `5000` | 内存检查间隔（毫秒） |\n| `warnThreshold` | `Object` | - | 警告阈值配置 |\n| `onWarning` | `Function` | - | 警告回调函数 |\n| `logger` | `Object` | - | 自定义日志对象 |\n\n**示例：**\n\n```jsx\n// 基础使用（开发环境自动启用）\n\n \n\n\n// 显示控制面板\n\n \n\n\n// 自定义配置\n {\n console.log('性能警告:', warning)\n }}\n>\n \n\n```\n\n### `useReactPerformanceMonitor(options)`\n\nReact Hook，用于管理性能监控。\n\n**参数：**\n- `options` (Object): 配置选项，见上方配置选项说明\n\n**返回值：**\n- `monitorActive` (boolean): 监控是否激活\n- `setMonitorActive` (Function): 设置监控状态\n- `startMonitor` (Function): 启动监控\n- `stopMonitor` (Function): 停止监控\n- `toggleMonitor` (Function): 切换监控状态\n- `clearData` (Function): 清空监控数据\n- `getReport` (Function): 获取性能报告\n- `ComponentProfiler` (Component): Profiler 组件\n- `monitor` (ReactPerformanceMonitor): 监控实例\n\n### `ReactPerformanceMonitor`\n\n核心监控类。\n\n**方法：**\n- `init()`: 初始化监控\n- `destroy()`: 销毁监控\n- `recordRender(componentName, phase, actualDuration, baseDuration)`: 记录组件渲染\n- `getReport()`: 获取性能报告\n- `clear()`: 清空数据\n\n### `createProfiler(monitor)`\n\n创建 Profiler 组件。\n\n**参数：**\n- `monitor` (ReactPerformanceMonitor): 监控实例\n\n**返回值：**\n- `ComponentProfiler` (Component): Profiler 组件\n\n### `withProfiler(Component, monitor, componentId?)`\n\n高阶组件，为组件添加性能监控。\n\n**参数：**\n- `Component` (Component): 要监控的组件\n- `monitor` (ReactPerformanceMonitor): 监控实例\n- `componentId` (string, 可选): 组件 ID\n\n**返回值：**\n- 包装后的组件\n\n### `useMonitorReport(monitorActive, getReport, updateInterval?)`\n\nHook，用于定期更新性能报告。\n\n**参数：**\n- `monitorActive` (boolean): 监控是否激活\n- `getReport` (Function): 获取报告的函数\n- `updateInterval` (number, 可选): 更新间隔，默认 2000ms\n\n**返回值：**\n- `report` (Object): 性能报告\n- `setReport` (Function): 手动设置报告\n\n## 报告结构\n\n```javascript\n{\n renders: [\n {\n component: \"ComponentName\",\n count: 10,\n avgDuration: \"5.23\",\n totalTime: \"52.30\",\n warning: false\n }\n ],\n memory: {\n current: {\n used: \"50.23 MB\",\n total: \"100.45 MB\",\n limit: \"2048.00 MB\"\n },\n trend: {\n increase: \"5.23 MB\",\n duration: \"30 秒\"\n },\n snapshots: [...]\n },\n dom: {\n total: 150,\n recent: [...],\n byTarget: [...]\n },\n timestamp: 1234567890\n}\n```\n\n## 最佳实践\n\n1. **仅用于开发环境**：在生产环境禁用或移除监控代码\n2. **按需启用**：只在需要调试性能问题时启用监控\n3. **合理设置阈值**：根据项目实际情况调整警告阈值\n4. **集成到开发工具**：可以将警告信息发送到监控平台或开发工具\n\n## 注意事项\n\n- `performance.memory` API 仅在 Chrome 浏览器中可用\n- `MutationObserver` 需要现代浏览器支持\n- 监控会消耗一定性能，建议仅在开发环境使用\n\n## 版本历史\n\n查看 [CHANGELOG.md](./CHANGELOG.md) 了解版本更新历史。\n\n## 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n## 相关链接\n\n- [使用指南](../../前端技术/性能优化/code/performance-project/src/pages/demos/monitoring/react-performance/USAGE_GUIDE.md) - 详细的使用教程\n- [迁移指南](./MIGRATION.md) - 从旧版本迁移\n\n## 许可证\n\nMIT\n\n","readmeFilename":"README.md"}