React 学习指南 - 第十三天 🚀

主题：React 性能优化（React.memo、useMemo、useCallback）

在 React 开发中，性能优化是一个不可忽视的话题，特别是在组件树庞大、状态频繁更新时。如果不加优化，应用可能会出现不必要的重新渲染，导致页面卡顿或反应迟缓。今天，我们来学习几种常见的性能优化方法。

1. React 组件为什么会重新渲染？

在 React 中，当父组件重新渲染时，所有子组件默认都会重新渲染，即使它们的 props 没有变化。例如：

function Parent() {
  const [count, setCount] = React.useState(0);

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

function Child() {
  console.log("Child 组件渲染");
  return <div>我是子组件</div>;
}

当点击按钮时，Parent 组件的 count 发生变化，导致整个组件重新渲染，Child 组件也会无意义地重新渲染。

2. 使用 React.memo 避免子组件无意义渲染

React.memo 是一个高阶组件（HOC），用于缓存组件，当 props 不变时，不会重新渲染。

const Child = React.memo(function Child() {
  console.log("Child 组件渲染");
  return <div>我是子组件</div>;
});

优化后的代码

function Parent() {
  const [count, setCount] = React.useState(0);

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

const Child = React.memo(() => {
  console.log("Child 组件渲染");
  return <div>我是子组件</div>;
});

✅ React.memo 让 Child 组件只有在 props 变化时才会重新渲染，从而减少不必要的渲染。

3. 使用 useMemo 缓存计算结果

如果某个计算非常耗时，我们可以使用 useMemo 进行优化，避免每次渲染都重新计算。

未优化版本

function ExpensiveComponent({ num }) {
  function slowFunction(n) {
    console.log("计算中...");
    return n ** 2;
  }

  return <div>计算结果：{slowFunction(num)}</div>;
}

当 num 变化时，slowFunction 每次都会执行，哪怕结果是相同的，这会影响性能。

优化后（useMemo 版本）

function ExpensiveComponent({ num }) {
  const result = React.useMemo(() => {
    console.log("计算中...");
    return num ** 2;
  }, [num]);

  return <div>计算结果：{result}</div>;
}

✅ useMemo 只有在 num 发生变化时才会重新计算，否则会复用缓存的值，提高性能。

4. 使用 useCallback 缓存函数

useCallback 的作用是避免不必要的函数创建，特别是在子组件依赖 props 为函数时。

问题：函数地址变化导致子组件重新渲染

function Parent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    console.log("点击了");
  };

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

const Child = React.memo(({ onClick }) => {
  console.log("Child 组件渲染");
  return <button onClick={onClick}>子组件按钮</button>;
});

每次 Parent 组件重新渲染，handleClick 这个函数都会被重新创建，导致 Child 组件无意义地重新渲染。

优化后（useCallback 版本）

function Parent() {
  const [count, setCount] = React.useState(0);

  const handleClick = React.useCallback(() => {
    console.log("点击了");
  }, []);

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

✅ useCallback 让 handleClick 只会在第一次渲染时创建，之后不会再变化，从而避免 Child 组件的无意义渲染。

5. 使用 useMemo + useCallback 结合优化

function Parent() {
  const [count, setCount] = React.useState(0);

  // useMemo 缓存计算结果
  const expensiveValue = React.useMemo(() => count * 2, [count]);

  // useCallback 缓存函数
  const handleClick = React.useCallback(() => {
    console.log("点击了");
  }, []);

  return (
    <div>
      <p>计算值：{expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <Child onClick={handleClick} />
    </div>
  );
}

✅ useMemo 缓存计算结果
✅ useCallback 缓存函数，防止 Child 组件不必要的渲染

6. React 性能优化总结

💡 最佳实践：

• 对于静态组件，使用 React.memo

• 对于高计算量数据，使用 useMemo

• 对于传递给子组件的回调函数，使用 useCallback

🔹 明天预告：React 事件机制（合成事件 vs 原生事件）！ 🚀