react-component-performance

React 组件性能

概述

识别渲染热点，隔离开销高昂的更新，并在不改变 UI 行为的前提下应用有针对性的优化。

何时使用

• 当用户要求对缓慢的 React 组件进行性能分析或改进时。
• 当你需要减少 React UI 中的重复渲染、列表卡顿或开销高昂的渲染工作时。

工作流

1. 复现或描述性能变慢的情况。
2. 找出触发重复渲染的原因（状态更新、props 频繁变化、副作用）。
3. 将快速变化的状态与庞大的子树隔离开。
4. 稳定 props 和处理函数；在收益明显的地方使用记忆化。
5. 减少开销高昂的工作（计算、DOM 规模、列表长度）。
6. 验证：打开 React DevTools Profiler → 录制约交互 → 检查 Flamegraph 中渲染时间超过约 16 ms 的组件 → 与优化前的基准录制进行对比。

检查清单

• 测量：使用 React DevTools Profiler 或打印渲染日志；捕获基准数据。
• 查找频繁变化：找出由定时器、滚动、输入或动画更新的状态。
• 拆分：将不断变化的状态移入子组件；保持庞大的列表静态不变。
• 记忆化：仅当 props 稳定时，才用 memo 包裹叶节点行。
• 稳定 props：对处理函数和派生值使用 useCallback/useMemo。
• 避免在渲染中做派生工作：预先计算，或在记忆化的辅助函数内部计算。
• 控制列表规模：对长列表使用窗口化/虚拟化；避免渲染隐藏项。
• key：确保 key 稳定；当顺序可能变化时避免使用索引。
• 副作用：检查依赖数组；避免每次渲染都会重新运行的副作用。
• 样式/布局：留意开销高昂的布局抖动或大规模 Markdown/diff 渲染。

优化模式

隔离不断变化的状态

将定时器或动画计数器移入子组件，使父列表不会在每次计时时重新渲染。

// ❌ Before – entire parent (and list) re-renders every second
function Dashboard({ items }: { items: Item[] }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <>
      <Clock tick={tick} />
      <ExpensiveList items={items} /> {/* re-renders every second */}
    </>
  );
}

// ✅ After – only <Clock> re-renders; list is untouched
function Clock() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <span>{tick}s</span>;
}

function Dashboard({ items }: { items: Item[] }) {
  return (
    <>
      <Clock />
      <ExpensiveList items={items} />
    </>
  );
}

用 useCallback + memo 稳定回调

// ❌ Before – new handler reference on every render busts Row memo
function List({ items }: { items: Item[] }) {
  const handleClick = (id: string) => console.log(id); // new ref each render
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

// ✅ After – stable handler; memo can skip parent-driven re-renders when props compare equal; state/context can still re-render Row
const Row = memo(({ item, onClick }: RowProps) => (
  <li><button type="button" onClick={() => onClick(item.id)}>{item.name}</button></li>
));

function List({ items }: { items: Item[] }) {
  const handleClick = useCallback((id: string) => console.log(id), []);
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

优先在渲染之外处理派生数据

// ❌ Before – recomputes on every render
function Summary({ orders }: { orders: Order[] }) {
  const total = orders.reduce((sum, o) => sum + o.amount, 0); // runs every render
  return <p>Total: {total}</p>;
}

// ✅ After – recomputes only when orders changes
function Summary({ orders }: { orders: Order[] }) {
  const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
  return <p>Total: {total}</p>;
}

其他模式

• 拆分行：将列表行提取为 props 范围狭窄的记忆化组件。
• 延迟繁重渲染：延迟渲染或折叠开销高昂的内容，直到展开时再渲染。

性能分析验证步骤

1. 打开 React DevTools → Profiler 标签页。
2. 点击 Record，执行缓慢的交互，然后点击 Stop。
3. 切换到 Flamegraph 视图；任何标有组件名且时间 > 约 16 ms 的条形都是候选目标。
4. 使用 Ranked chart 按自身渲染时间排序，锁定最主要的元凶。
5. 一次只应用一项优化，重新录制，并将渲染次数和时长与基准进行对比。

示例参考

当用户想要一个具体的重构示例时，加载 references/examples.md。

局限性

• 仅当任务明确符合上述范围时才使用此技能。
• 不要将输出视为特定环境验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来并请求澄清。