第三章：React 进阶

性能优化

1. 为什么需要性能优化？

React 应用在组件频繁更新或数据量较大时，可能会出现性能瓶颈。性能优化的目标是减少不必要的渲染、提高渲染效率，从而提升用户体验。

2. React 性能优化的核心方法

2.1 使用 React.memo 避免不必要的重新渲染

React.memo 是一个高阶组件，用于缓存函数组件的渲染结果。当组件的 props 未变化时，直接复用上一次的渲染结果。

const MemoizedComponent = React.memo(function MyComponent(props) {
  // 仅在 props 变化时重新渲染
});

2.2 使用 useMemo 缓存计算结果

useMemo 用于缓存复杂的计算结果，避免每次渲染时重复计算。

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]); // 仅在 a 或 b 变化时重新计算

2.3 使用 useCallback 缓存函数

useCallback 用于缓存函数引用，避免因函数重新创建导致子组件不必要的渲染。

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []); // 依赖项为空数组，函数不会重新创建

2.4 避免内联对象和函数

内联对象或函数会导致每次渲染时创建新的引用，可能触发子组件的重新渲染。

// 不推荐：内联对象
<ChildComponent style={{ color: 'red' }} />

// 推荐：提取为常量
const childStyle = { color: 'red' };
<ChildComponent style={childStyle} />

2.5 虚拟化长列表

对于渲染大量数据的列表，可以使用虚拟化技术（如 react-window 或 react-virtualized），仅渲染可见区域的内容。

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const VirtualizedList = () => (
  <List height={500} itemCount={1000} itemSize={50} width={300}>
    {Row}
  </List>
);

3. 其他优化技巧

3.1 代码分割（Code Splitting）

使用 React.lazy 和 Suspense 实现按需加载组件，减少初始加载时间。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

3.2 使用生产模式构建

确保在生产环境中使用 React 的生产版本（移除开发模式的警告和调试代码）。

3.3 使用性能分析工具

  • React DevTools Profiler：分析组件的渲染时间和频率。
  • Chrome Performance Tab：记录并分析运行时性能。

4. 总结

性能优化是 React 开发中的重要环节，通过合理使用缓存、避免不必要的渲染和代码分割等技术，可以显著提升应用性能。建议结合工具分析和实际场景选择优化策略。

动手实践：尝试用 React.memo 和 useMemo 优化一个现有组件，观察渲染性能的变化！

Last Updated::