第7章 React性能优化核心

性能优化是React开发中的重要主题，直接影响用户体验和应用成功。本章将深入探讨React性能优化的核心技术和最佳实践，从组件记忆化到Bundle优化，帮你掌握构建高性能React应用的关键技能。

通过本章学习，你将掌握如何识别性能瓶颈、选择合适的优化策略，以及在实际项目中应用这些技术来显著提升应用性能。

🗂️ 本章目录

1️⃣ memo组件记忆化

• 1.1 React.memo的工作原理：浅比较机制和重渲染控制

• 1.2 自定义比较函数：精确控制组件更新条件

• 1.3 memo使用的最佳实践：何时使用和性能权衡

2️⃣ 避免不必要的重渲染

• 2.1 识别重渲染的原因：使用React DevTools分析性能

• 2.2 状态设计优化：合理的状态结构减少影响范围

• 2.3 事件处理器优化：useCallback的正确使用

3️⃣ 懒加载与代码分割

• 3.1 React.lazy动态导入：组件级别的代码分割

• 3.2 路由级别的懒加载：页面加载性能优化

• 3.3 Suspense边界设计：优雅的加载状态处理

4️⃣ 列表虚拟化技术

• 4.1 虚拟化原理：大数据列表的性能解决方案

• 4.2 react-window实战：高性能列表组件实现

• 4.3 复杂列表场景：不等高、嵌套、无限滚动的处理

5️⃣ Bundle优化策略

• 5.1 Webpack分析与优化：包大小分析和优化策略

• 5.2 Tree Shaking配置：死代码消除的最佳实践

• 5.3 第三方库优化：依赖选择和按需导入

---

💡 学习重点：本章重点关注实际的性能优化技术，每种优化方法都有性能对比数据和适用场景分析。建议结合实际项目的性能监控来应用这些技术。

---

1. memo组件记忆化

1.1 React.memo的工作原理

React.memo是一个高阶组件，它会对props进行浅比较，只有在props发生变化时才会重新渲染组件。

❌ 不必要的重渲染问题：

function ExpensiveChild({ data, onClick }) {
console.log('ExpensiveChild rendered');

// 模拟昂贵的计算
const processedData = data.map(item => ({
    ...item,
    processed: item.value * 2 + Math.random()
  }));

return (
    <div>
      <h3>处理后的数据</h3>
      {processedData.map(item => (
        <div key={item.id} onClick={() => onClick(item.id)}>
          {item.name}: {item.processed}
        </div>
      ))}
    </div>
  );
}

function Parent() {
const [count, setCount] = useState(0);
const [data] = useState([
    { id: 1, name: 'Item 1', value: 10 },
    { id: 2, name: 'Item 2', value: 20 }
  ]);

const handleClick = (id) => {
    console.log('Clicked item:', id);
  };

return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      {/* 每次父组件重渲染，ExpensiveChild都会重新计算 */}
      <ExpensiveChild data={data} onClick={handleClick} />
    </div>
  );
}

✅ 使用React.memo优化：

const ExpensiveChild = React.memo(function ExpensiveChild({ data, onClick }) {
console.log('ExpensiveChild rendered');

const processedData = useMemo(() => {
    console.log('Processing data...');
    return data.map(item => ({
      ...item,
      processed: item.value * 2 + Math.random()
    }));
  }, [data]);

return (
    <div>
      <h3>处理后的数据</h3>
      {processedData.map(item => (
        <div key={item.id} onClick={() => onClick(item.id)}>
          {item.name}: {item.processed}
        </div>
      ))}
    </div>
  );
});

function Parent() {
const [count, setCount] = useState(0);
const [data] = useState([
    { id: 1, name: 'Item 1', value: 10 },
    { id: 2, name: 'Item 2', value: 20 }
  ]);

// 使用useCallback稳定函数引用
const handleClick = useCallback((id) => {
    console.log('Clicked item:', id);
  }, []);

return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      {/* 现在ExpensiveChild只在data或onClick改变时重渲染 */}
      <ExpensiveChild data={data} onClick={handleClick} />
    </div>
  );
}

1.2 自定义比较函数

当默认的浅比较不够用时，可以提供自定义比较函数：