chatGpt之React 组件优化（useMemo、useCallback、React.memo）21天-前端-E先生的博客

React 学习指南 - 第二十一天 🚀

主题：React 组件优化（useMemo、useCallback、React.memo）

随着项目变大，组件的渲染和 re-render 次数会增加，进而影响性能。今天我们重点学习 React 中的性能优化方案，掌握这三大优化工具：

useMemo
useCallback
React.memo

1. 为什么需要优化？

在 React 中，每次父组件重新渲染，子组件也会默认重新渲染，即使传递给它的 props 并没有变化，这会导致：

不必要的 DOM 更新
无效的计算执行（如大量数据的计算）
页面性能降低（特别是大型列表、复杂 UI）

所以我们需要用 记忆化（Memoization） 手段，优化组件的渲染行为。

2. useMemo：缓存计算结果

useMemo 用于缓存计算密集型或依赖复杂数据的值，避免每次渲染都重新执行计算。

示例：缓存复杂计算

import { useMemo, useState } from "react";

function ExpensiveComponent({ num }) {
  const expensiveResult = useMemo(() => {
    console.log("执行复杂计算");
    let total = 0;
    for (let i = 0; i < 100000000; i++) {
      total += i;
    }
    return total + num;
  }, [num]);

  return <h3>计算结果: {expensiveResult}</h3>;
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <p>count: {count}</p>
      <ExpensiveComponent num={count} />
    </div>
  );
}

export default App;

✅ useMemo(() => fn, [依赖])
✅ 只有依赖 num 变化时才重新计算
✅ 大大减少无效计算

3. useCallback：缓存函数

useCallback 用于缓存函数引用，避免函数在每次渲染时都被重新创建。

示例：防止子组件重复渲染

import { useCallback, useState } from "react";

function Child({ onClick }) {
  console.log("子组件渲染");
  return <button onClick={onClick}>点击我</button>;
}

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("按钮被点击");
  }, []);

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

export default App;

✅ useCallback(() => fn, [依赖])
✅ 缓存 handleClick，Child 子组件不会因父组件 count 变化而无效重渲染

4. React.memo：缓存组件

React.memo 是一个高阶组件，用于缓存整个函数组件，只有 props 发生变化时才重新渲染。

示例：缓存子组件

import { useState, memo } from "react";

const Child = memo(function Child({ text }) {
  console.log("子组件渲染");
  return <h3>{text}</h3>;
});

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <p>count: {count}</p>
      <Child text="我是子组件" />
    </div>
  );
}

export default App;

✅ 子组件 Child 只有 text 改变时才会重新渲染
✅ 防止因父组件 re-render 导致的子组件无效更新

5. 三者区别 & 配合使用

优化工具	作用	典型使用场景
`useMemo`	缓存计算结果	复杂计算、列表筛选、合并数据等
`useCallback`	缓存函数引用	防止不必要的子组件 re-render
`React.memo`	缓存组件	减少静态子组件的渲染