react-performance-optimization

React 性能优化

通过记忆化、代码拆分、虚拟化和高效渲染策略优化 React 应用性能的专家指南。

何时使用此技能

• 优化渲染缓慢的 React 组件
• 减小打包体积，以加快初始加载速度
• 提高大型列表或数据表格的响应速度
• 避免复杂组件树中不必要的重新渲染
• 优化状态管理，减少渲染级联
• 通过代码拆分提升感知性能
• 使用 React DevTools Profiler 调试性能问题

核心概念

React 渲染优化

当 props 或 state 发生变化时，React 会重新渲染组件。不必要的重新渲染会浪费 CPU 周期，降低用户体验。主要优化技术：

• 记忆化：缓存组件渲染结果和计算值
• 代码拆分：按需加载代码，加快初始加载
• 虚拟化：仅渲染可见的列表项
• 状态优化：调整状态结构，尽量减少渲染级联

何时进行优化

1. 先分析：使用 React DevTools Profiler 找出实际瓶颈
2. 衡量效果：确认优化确实提升了性能
3. 避免过早优化：不要优化运行很快的组件

快速参考

按需加载详细模式和示例：

主题	参考文件
React.memo、useMemo、useCallback 模式	skills/react-performance-optimization/references/memoization.md
使用 lazy/Suspense 进行代码拆分、打包优化	skills/react-performance-optimization/references/code-splitting.md
大型列表的虚拟化（react-window）	skills/react-performance-optimization/references/virtualization.md
状态管理策略、拆分 context	skills/react-performance-optimization/references/state-management.md
useTransition、useDeferredValue（React 18+）	skills/react-performance-optimization/references/concurrent-features.md
React DevTools Profiler、性能监控	skills/react-performance-optimization/references/profiling-debugging.md
常见陷阱和反模式	skills/react-performance-optimization/references/common-pitfalls.md

优化工作流

1. 找出瓶颈

# Open React DevTools Profiler
# Record interaction → Analyze flame graph → Find slow components

请留意：

• 出现黄色/红色条形图的组件（渲染缓慢）
• 不必要的渲染（props/state 未变化）
• 每次渲染都会进行的高开销计算

2. 应用针对性优化

针对不必要的重新渲染：

• 使用 React.memo 包装组件
• 使用 useCallback 稳定函数引用
• 检查 props 中的内联对象/数组

针对高开销计算：

• 使用 useMemo 缓存结果
• 尽可能将计算移到渲染之外

针对大型列表：

• 使用 react-window 实现虚拟化
• 确保使用正确且唯一的 key（而不是 index）

针对初始加载缓慢：

• 使用 React.lazy 添加代码拆分
• 使用 webpack-bundle-analyzer 分析打包体积
• 对大型依赖使用动态导入

3. 验证改进效果

# Record new Profiler session
# Compare before/after metrics
# Ensure optimization actually helped

常见模式

记忆化高开销组件

import { memo } from 'react';

const ExpensiveList = memo(({ items, onItemClick }) => {
  return items.map(item => (
    <Item key={item.id} data={item} onClick={onItemClick} />
  ));
});

缓存计算值

import { useMemo } from 'react';

function DataTable({ items, filters }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => filters.includes(item.category));
  }, [items, filters]);

  return <Table data={filteredItems} />;
}

稳定函数引用

import { useCallback } from 'react';

function Parent() {
  const handleClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);

  return <MemoizedChild onClick={handleClick} />;
}

拆分路由代码

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Reports = lazy(() => import('./Reports'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/reports" element={<Reports />} />
      </Routes>
    </Suspense>
  );
}

虚拟化大型列表

import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={80}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  );
}

常见错误

1. 过度记忆化：不要记忆化简单、快速的组件（会增加开销）
2. 内联对象/数组：新引用会破坏记忆化（config={{ theme: 'dark' }}）
3. 缺少依赖项：useCallback/useMemo 中出现过时闭包
4. 将 index 用作 key：列表顺序变化时会破坏协调过程
5. 使用单个大型 context：任何更新都会导致大范围重新渲染
6. 不进行性能分析：不经测量就优化会浪费时间

性能检查清单

优化之前：

• 使用 React DevTools 进行性能分析，找出瓶颈
• 测量基准性能指标

优化目标：

• 使用稳定的 props 对开销较大的组件进行记忆化
• 使用 useMemo 缓存计算结果（仅在计算确实开销较大时）
• 对传递给已记忆化子组件的函数使用 useCallback
• 为路由和较大的组件实现代码拆分
• 对包含超过 100 个项目的列表进行虚拟化
• 为列表项提供稳定的键（使用唯一 ID，而非索引）
• 按更新频率拆分状态
• 使用并发特性（useTransition、useDeferredValue）提升响应速度

优化之后：

• 再次进行性能分析，验证改进效果
• 检查包体积是否减小（如适用）
• 确保功能没有回归

资源

• React 文档 - 性能：https://react.dev/learn/render-and-commit
• React DevTools：用于性能分析的浏览器扩展
• react-window：https://github.com/bvaughn/react-window
• 包分析工具：webpack-bundle-analyzer、rollup-plugin-visualizer
• Lighthouse：Chrome DevTools 性能审计