react组件卡顿如何排查
排查React组件卡顿的方法
使用React Profiler工具
React DevTools中的Profiler功能可以记录组件的渲染时间，帮助定位性能瓶颈。通过分析火焰图，可以识别渲染时间过长的组件及其原因。Profiler会提供详细的渲染时间、更新原因等信息。
检查不必要的重新渲染
使用React.memo或PureComponent避免子组件不必要的渲染。通过useMemo和useCallback缓存计算值和函数引用，减少因依赖项变化导致的重新渲染。结合console.log或why-did-you-render库检查渲染触发原因。
优化状态管理
避免在高层级组件集中管理状态，将状态下放到更小的范围。使用useState或useReducer代替复杂的全局状态管理，减少状态更新波及的范围。拆分大规模状态对象，避免单次更新触发过多关联组件的渲染。
减少渲染负载
虚拟化长列表（如react-window或react-virtualized），避免渲染大量不可见的DOM节点。拆分复杂组件为多个小组件，隔离高频更新部分。使用shouldComponentUpdate或React.memo自定义比较逻辑，跳过非必要更新。
分析第三方库影响
检查是否因第三方库（如动画、数据请求库）导致主线程阻塞。使用Chrome Performance工具录制页面运行情况，分析长任务（Long Tasks）的来源。替换或优化库的使用方式，例如延迟加载非关键资源。
代码示例：使用React.memo优化
const ExpensiveComponent = React.memo(({ data }) => {
// 组件逻辑
return <div>{data}</div>;
}, (prevProps, nextProps) => {
// 自定义props比较逻辑
return prevProps.data === nextProps.data;
});关键性能指标监控
监控首次内容渲染（FCP）、交互时间（TTI）等核心指标。使用Lighthouse或WebPageTest生成性能报告，定位脚本执行、布局抖动等问题。确保开发与生产环境的性能差异可解释（如禁用开发模式的严格检查）。
