React性能优化

她的双马尾2025-03-23 11:10

概念

性能优化是指通过减少不必要的渲染或计算来提高应用的性能。React 提供了 React.memo、useCallback、useMemo 等工具来优化性能。

用法

React.memo：缓存函数组件，避免在 Props 没有变化时重新渲染。
useCallback：缓存回调函数，避免在每次渲染时重新创建。
useMemo：缓存计算结果，避免在依赖项没有变化时重新计算。

使用场景

React.memo：当父组件重新渲染时，子组件不需要重新渲染。
useCallback：当回调函数作为 Props 传递给子组件时。
useMemo：当计算结果依赖复杂逻辑或大量数据时。

代码示例

javascript 复制代码

// 1. 使用 React.memo 缓存组件
const ExpensiveComponent = React.memo(function({ value }) {
  console.log('ExpensiveComponent rendered');
  return <div>Value: {value}</div>;
});

function ParentComponent() {
  const [count, setCount] = React.useState(0);
  const [value, setValue] = React.useState(10);

  // 2. 使用 useCallback 缓存回调函数
  const increment = React.useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  // 3. 使用 useMemo 缓存计算结果
  const doubledValue = React.useMemo(() => {
    console.log('Calculating doubled value');
    return value * 2;
  }, [value]);

  return (
    <div>
      <button onClick={increment}>Increment Count: {count}</button>
      <button onClick={() => setValue(prev => prev + 5)}>Change Value: {value}</button>
      <div>Doubled Value: {doubledValue}</div>
      <ExpensiveComponent value={doubledValue} />
    </div>
  );
}

代码解析：

React.memo ：ExpensiveComponent 只会在 value 变化时重新渲染。
useCallback ：increment 函数在组件渲染时不会重新创建。
useMemo ：doubledValue 只会在 value 变化时重新计算。