如何找出发生重渲染的组件？

一、React DevTools可视化观测 #

• 打开React DevTools，切换到Profiler面板
• 点击录制按钮（圆形红点），触发你怀疑存在重渲染的操作后停止录制
• 火焰图中，组件色块的深浅对应渲染频率或耗时——颜色越深，渲染越频繁或耗时越长
• 点击目标组件，右侧面板会明确显示渲染触发原因，比如「props变化」「state更新」「父组件渲染导致」

另外还有实时高亮功能：

• 在Components面板的设置（齿轮图标）里勾选Highlight Updates
• 组件重渲染时，页面对应区域会闪烁高亮，能直观捕捉频繁渲染的组件

二、自定义Hook追踪渲染次数 #

写一个轻量Hook，给目标组件添加渲染日志：

import { useEffect, useRef } from 'react';

export function useRenderTracker(componentName) {
  const renderCount = useRef(0);
  
  useEffect(() => {
    renderCount.current++;
    console.log(`${componentName} 重渲染次数: ${renderCount.current}`);
  });
  
  return renderCount.current;
}

用法示例：

function UserCard() {
  useRenderTracker('UserCard');
  // 组件逻辑
}

每次组件重渲染时，控制台会打印组件名和累计渲染次数，还可以扩展代码，打印props/state的具体变化，方便排查触发源。

三、直接添加控制台日志 #

如果只需要快速排查单个组件，直接在组件函数内加日志：

function ProductList(props) {
  console.log('ProductList 正在渲染，当前props:', props);
  // 组件逻辑
}

这种方式简单直接，能对比每次渲染的props/state差异，判断是否是不必要的更新导致重渲染。

四、生产环境性能分析 #

生产环境排查可用Chrome DevTools的Performance面板：

• 打开Performance面板，勾选Performance和Memory选项
• 点击录制按钮，触发操作后停止录制
• 在Timeline中找到React Render阶段，展开后可查看每个组件的渲染耗时与调用栈，定位性能瓶颈

内容的提问来源于stack exchange，提问作者Batuhan Baybaş