如何监控react性能
使用 React Profiler 进行性能分析
React Profiler 是 React 官方提供的性能分析工具，可以记录组件的渲染时间和频率。在开发模式下，可以通过 React DevTools 的 Profiler 选项卡使用。Profiler 会生成火焰图，展示每个组件的渲染耗时，帮助定位性能瓶颈。
使用 Chrome DevTools 的 Performance 面板
Chrome DevTools 的 Performance 面板可以录制页面运行时性能数据。通过录制 React 应用的交互过程，可以分析 JavaScript 执行时间、布局重绘等性能指标。重点关注长任务和频繁触发的重渲染。
使用 React.memo 和 useMemo 优化组件
React.memo 用于缓存函数组件，避免不必要的重新渲染。useMemo 用于缓存计算结果，避免重复计算。合理使用这些 API 可以减少不必要的渲染，提升性能。
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);使用 shouldComponentUpdate 或 PureComponent
对于类组件，可以通过实现 shouldComponentUpdate 或继承 PureComponent 来避免不必要的渲染。PureComponent 会自动对 props 和 state 进行浅比较，决定是否重新渲染。
class MyComponent extends React.PureComponent {
render() {
return <div>{this.props.value}</div>;
}
}监控虚拟 DOM 的更新频率
通过 React DevTools 的 Settings 中勾选 "Highlight updates when components render" 选项，可以高亮显示正在更新的组件。频繁高亮的组件可能存在性能问题，需要进一步优化。
使用 why-did-you-render 库分析重渲染原因
why-did-you-render 是一个第三方库，可以帮助开发者理解组件为何会重新渲染。安装并配置后，它会在控制台输出详细的重新渲染原因。
npm install @welldone-software/why-did-you-renderimport whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React);使用 Lighthouse 进行综合性能评估
Lighthouse 是 Chrome 内置的自动化工具，可以对 React 应用进行全面的性能评估。它会生成报告，包含加载性能、交互响应时间等指标，并提供优化建议。
监控内存泄漏问题
通过 Chrome DevTools 的 Memory 面板，可以拍摄堆快照，分析内存使用情况。如果 React 组件卸载后仍占用内存，可能存在内存泄漏问题，需要检查事件监听器、定时器等资源的清理情况。
