React 学习指南 - 第十七天 🚀

主题：React Hooks 进阶（useMemo、useCallback、useReducer）

在 React 开发中，Hooks 提供了强大的状态管理和优化手段。今天，我们将深入学习 useMemo、useCallback、useReducer，并了解它们在性能优化和复杂状态管理中的应用。

1. 为什么需要进阶 Hooks？

在开发 React 应用时，我们会遇到： ✅ 不必要的渲染：组件在状态未变时仍然重新渲染，影响性能
✅ 父组件传递函数导致子组件重复渲染
✅ 复杂状态管理：useState 无法高效管理复杂逻辑

这时，我们可以使用：

• useMemo：缓存计算结果，避免重复计算

• useCallback：缓存函数，避免子组件重复渲染

• useReducer：替代 useState 进行复杂状态管理

2. useMemo：避免不必要的计算

useMemo 用于缓存计算结果，避免在每次渲染时重复执行昂贵的计算。

2.1 没有 useMemo 的情况

import { useState } from "react";

function ExpensiveComponent({ number }) {
  console.log("计算中...");
  let result = number ** 2; // 模拟昂贵计算
  return <p>计算结果：{result}</p>;
}

export default function App() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(2);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数：{count}</button>
      <button onClick={() => setNumber(number + 1)}>数字：{number}</button>
      <ExpensiveComponent number={number} />
    </div>
  );
}

❌ 每次 count 变化时，ExpensiveComponent 都会重新计算。

2.2 使用 useMemo 进行优化

import { useState, useMemo } from "react";

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

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

export default function App() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(2);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数：{count}</button>
      <button onClick={() => setNumber(number + 1)}>数字：{number}</button>
      <ExpensiveComponent number={number} />
    </div>
  );
}

✅ 只有 number 变化时，才会重新计算
✅ count 变化不会触发计算，提升性能

⚠️ useMemo 适用于：

• 计算量较大的函数（如排序、过滤、数学计算）

• 依赖项不经常变化的计算

3. useCallback：缓存函数，防止子组件重复渲染

在 React 中，每次组件渲染时，函数都会重新创建，导致子组件的 useEffect 或 React.memo 失效。

3.1 没有 useCallback 的情况

import { useState } from "react";

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

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

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

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

❌ 每次 count 变化，handleClick 重新创建，导致 Child 组件重复渲染。

3.2 使用 useCallback 进行优化

import { useState, useCallback } from "react";

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

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

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

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

✅ useCallback(() => {}, []) 缓存函数，避免子组件重复渲染
✅ 适用于传递给 React.memo 组件的回调函数

⚠️ useCallback 适用于：

• 父组件向子组件传递的事件处理函数

• 依赖项不经常变化的回调函数（如 onClick、onChange）

4. useReducer：管理复杂状态

useState 适合管理简单的状态，但当状态变得复杂时，可以用 useReducer 代替。

4.1 没有 useReducer 的情况

import { useState } from "react";

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

❌ 状态更新逻辑分散，不利于管理。

4.2 使用 useReducer

import { useReducer } from "react";

// 定义 reducer
function counterReducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>计数：{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
    </div>
  );
}

✅ 状态更新逻辑集中管理
✅ 适用于复杂的状态更新逻辑（如表单、多状态管理）