React 性能优化完全指南

React 渲染机制

理解 React 的渲染机制是性能优化的基础。

Virtual DOM 的工作原理

function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(c => c + 1)}>
        +1
      </button>
      <ExpensiveComponent />
    </div>
  );
}

优化技巧

1. React.memo

const ExpensiveComponent = React.memo(
  function ExpensiveComponent({ data }: { data: Item[] }) {
    return (
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
);

2. useMemo 和 useCallback

function SearchPage() {
  const [query, setQuery] = useState('');
  const [items, setItems] = useState<Item[]>([]);
  
  // 缓存计算结果
  const filteredItems = useMemo(
    () => items.filter(item => 
      item.name.toLowerCase().includes(query.toLowerCase())
    ),
    [items, query]
  );
  
  // 缓存回调函数
  const handleSearch = useCallback(
    (value: string) => setQuery(value),
    []
  );
  
  return <SearchResults items={filteredItems} />;
}

3. 虚拟列表

import { FixedSizeList } from 'react-window';

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

性能检测工具

• React DevTools：Profiler 选项卡
• Chrome Lighthouse：性能审计
• Web Vitals：核心 Web 指标

总结

性能优化是一个持续的过程，关键是要用数据说话，避免过早优化。