react页面卡死如何查找

检查内存泄漏

使用Chrome DevTools的Memory面板记录堆内存快照，对比多次操作前后的内存变化。重点关注未释放的组件实例、事件监听器和大型数据对象。重复操作时内存持续增长可能表明存在泄漏。

分析渲染性能

在React Developer Tools中开启"Highlight updates"，观察不必要的子组件重渲染。使用Profiler记录组件渲染时间，定位耗时超过50ms的渲染节点。优化手段包括React.memo、useMemo和useCallback。

排查无限循环

在useEffect或useMemo依赖项中添加console.log，检查是否触发意外更新循环。特别注意依赖数组包含引用类型（如对象/数组）而未做稳定性处理的情况。

检查长任务

通过Chrome Performance面板录制操作过程，分析Main线程中的长任务（超过50ms的黄色块）。重点关注脚本执行时间、强制同步布局和样式计算等瓶颈。

网络请求阻塞

检查未取消的冗余请求或缓慢的API响应，使用Network面板查看pending状态的请求。在useEffect清理函数中实现请求终止：

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal });
  return () => controller.abort();
}, []);

大数据量处理

虚拟滚动优化长列表渲染，避免直接渲染超过1000项的数组。使用react-window或react-virtualized库，仅渲染可视区域内的元素。

第三方库问题

通过依赖树分析工具（如source-map-explorer）检查过大的bundle体积。特别关注动画库、图表库等可能阻塞主线程的组件，考虑动态导入或替换轻量方案。