React性能优化三剑客：useCallback + React.memo + useMemo 实战指南

大家好，我是FogLetter，今天我们来聊聊React性能优化中三个非常重要的Hook：useCallback、React.memo和useMemo。这三个工具就像是React性能优化的"三剑客"，合理使用它们可以让你的应用性能提升一个档次！

为什么需要性能优化？

在开始之前，我们先来看一个常见的场景。假设我们有一个父组件和一个子组件：

jsx 复制代码

function Parent() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
}

function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
}

每次点击"Increment"按钮时，你会在控制台看到"Child rendered"被打印出来，即使子组件的props实际上并没有变化。这就是React默认的行为------父组件重新渲染会导致所有子组件重新渲染。

在小型应用中这可能不是问题，但随着应用规模扩大，这种不必要的重新渲染会显著影响性能。

React.memo：阻止不必要的子组件渲染

React.memo是一个高阶组件，它可以记忆组件的渲染结果，只有当props发生变化时才会重新渲染。

jsx 复制代码

const Child = React.memo(function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

现在，当我们点击"Increment"按钮时，子组件不会重新渲染了。但是等等...如果你测试一下会发现，子组件仍然在重新渲染！这是为什么呢？

useCallback：稳定的函数引用

问题出在我们的handleClick函数上。在JavaScript中，函数是对象，每次父组件重新渲染时，都会创建一个新的handleClick函数实例。虽然功能相同，但从引用角度看，它是一个"新"的函数，因此触发了子组件的重新渲染。

这就是useCallback的用武之地：

jsx 复制代码

function Parent() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // 依赖数组为空，表示这个函数永远不会改变

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
}

现在，子组件只有在真正需要时才会重新渲染！

useCallback的依赖数组

useCallback的第二个参数是依赖数组，类似于useEffect：

jsx 复制代码

const handleClick = useCallback(() => {
  console.log('Count is:', count);
}, [count]); // 当count变化时，重新创建函数

useMemo：昂贵的计算缓存

useMemo类似于useCallback，但它用于记忆计算结果而不是函数。当你有昂贵的计算需要避免在每次渲染时重复执行时，useMemo就派上用场了。

jsx 复制代码

function ExpensiveComponent({ value }) {
  const computedValue = useMemo(() => {
    console.log('Computing...');
    // 模拟昂贵计算
    let result = value;
    for (let i = 0; i < 1000000000; i++) {
      result += Math.random();
    }
    return result;
  }, [value]); // 只有当value变化时才重新计算

  return <div>{computedValue}</div>;
}

实战案例：优化一个计数器应用

让我们看一个更完整的例子，结合所有三个优化技术：

jsx 复制代码

import React, { useState, useCallback, useMemo } from 'react';

// 使用React.memo优化子组件
const Button = React.memo(({ onClick, children }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>{children}</button>;
});

const Display = React.memo(({ value }) => {
  console.log('Display rendered');
  return <div>Current value: {value}</div>;
});

function Counter() {
  const [count, setCount] = useState(0);
  const [darkMode, setDarkMode] = useState(false);
  
  // 使用useCallback避免函数重新创建
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);
  
  const decrement = useCallback(() => {
    setCount(c => c - 1);
  }, []);
  
  const toggleDarkMode = useCallback(() => {
    setDarkMode(mode => !mode);
  }, []);
  
  // 使用useMemo避免昂贵的样式计算
  const theme = useMemo(() => ({
    backgroundColor: darkMode ? 'black' : 'white',
    color: darkMode ? 'white' : 'black'
  }), [darkMode]);

  return (
    <div style={theme}>
      <Display value={count} />
      <Button onClick={increment}>+</Button>
      <Button onClick={decrement}>-</Button>
      <Button onClick={toggleDarkMode}>Toggle Theme</Button>
    </div>
  );
}

在这个例子中：

Button和Display组件都使用React.memo进行优化
所有回调函数都使用useCallback进行记忆
主题样式使用useMemo避免每次渲染时重新计算

性能优化的黄金法则

避免过早优化 ：不是所有组件都需要React.memo
合理拆分组件：小组件更容易优化
依赖数组要准确 ：确保useCallback和useMemo的依赖数组包含所有变化的值

常见误区

过度使用useCallback：简单的函数可能不需要记忆
依赖数组不完整：会导致闭包问题
滥用React.memo：对于简单组件，比较props的开销可能大于重新渲染
在useMemo中执行副作用 ：这是useEffect的工作

什么时候不需要优化？

组件渲染非常快
组件很少重新渲染
props经常变化，React.memo几乎没用
应用规模很小，性能不是问题

总结

useCallback、React.memo和useMemo是React性能优化的强大工具，但它们不是银弹。合理使用这些工具，结合组件拆分和状态管理策略，可以显著提升React应用的性能。

记住，性能优化是一门平衡的艺术，在优化之前，一定要先确定真正的性能瓶颈在哪里。

希望这篇文章对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言讨论。下次见！