React useMemo 与 useCallback原理、场景与避坑完全指南

const cachedValue = useMemo(() => {
  // 耗时计算逻辑
  return result;
}, [dep1, dep2]);

// Hook 节点的数据结构（简化版）
interface Hook {
  memoizedState: any,   // 存储当前 Hook 的状态值
  baseState: any,       // 基础状态
  baseQueue: any,       // 基础更新队列
  queue: any,           // 待处理更新队列
  next: Hook | null,    // 指向下一个 Hook
}

fiber.memoizedState → hook1(useState) → hook2(useMemo) → hook3(useEffect) → null
                       [count, null]    [cachedValue, deps]  [cleanup, deps]

// 简化版：从 alternate（旧的 Current Fiber）读取上次的 Hook 状态
const oldHook = workInProgress.alternate?.memoizedState;
const cachedValue = oldHook?.memoizedState[0];  // 取出上次缓存的值
const cachedDeps = oldHook?.memoizedState[1];   // 取出上次的依赖

function mountMemo<T>(nextCreate: () => T, deps): T {
  // 1. 创建新的 Hook 节点，追加到 Hook 链表末尾
  const hook = mountWorkInProgressHook();
  // 2. 标准化依赖数组（undefined → null）
  const nextDeps = deps === undefined ? null : deps;
  // 3. 立即同步执行计算函数（在 Render 阶段）
  const nextValue = nextCreate();
  // 4. 将 [计算结果, 依赖数组] 存入 memoizedState
  hook.memoizedState = [nextValue, nextDeps];
  // 5. 返回计算结果供组件使用
  return nextValue;
}

function updateMemo<T>(nextCreate: () => T, deps): T {
  // 1. 从 Hook 链表中按顺序取出对应的 Hook 节点
  const hook = updateWorkInProgressHook();
  // 2. 标准化新依赖数组
  const nextDeps = deps === undefined ? null : deps;
  // 3. 读取上次缓存的状态 [cachedValue, cachedDeps]
  const prevState = hook.memoizedState;
  // 4. 依赖比较：如果依赖未变化，直接返回缓存值
  if (nextDeps !== null) {
    const prevDeps = prevState[1];
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0];  // 🎯 命中缓存，跳过计算
    }
  }
  // 5. 依赖变化了，重新执行计算
  const nextValue = nextCreate();
  // 6. 更新缓存
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) return false;
  // 长度不同，直接判定为变化
  if (nextDeps.length !== prevDeps.length) return false;
  // 逐项使用 Object.is 进行浅比较
  for (let i = 0; i < prevDeps.length; i++) {
    if (!Object.is(nextDeps[i], prevDeps[i])) {
      return false;
    }
  }
  return true;
}

function ProductList({ products, searchTerm }) {
  // 每次渲染都 filter 上千条数据 → 卡顿
  const filtered = useMemo(() => {
    return products.filter(p =>
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [products, searchTerm]);  // 仅当这两个值变化时才重新筛选
  return <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

function Parent({ user }) {
  // 每次渲染都创建新对象 → 子组件 memo 失效
  const config = useMemo(() => ({
    theme: 'dark',
    locale: user.locale,
    permissions: calcPermissions(user.role),
  }), [user.locale, user.role]);
  return <ChildComponent config={config} />;
}
const ChildComponent = React.memo(({ config }) => {
  // 只有 config 引用真正变化时才重渲染
  return <div>{config.theme}</div>;
});

const options = useMemo(() => ({ method: 'GET', headers }), [headers]);
useEffect(() => {
  fetch(url, options);  // options 引用稳定，Effect 不会重复执行
}, [options]);

// ❌ 简单运算，缓存开销 > 计算开销
const value = useMemo(() => count + 1, [count]);
// ✅ 直接计算即可
const value = count + 1;
// ❌ 在 useMemo 中执行副作用
const data = useMemo(() => {
  fetchData();  // 副作用！
  return processedData;
}, [deps]);
// ✅ 副作用用 useEffect

const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

function mountCallback<T>(callback: T, deps): T {
  // 1. 创建新的 Hook 节点
  const hook = mountWorkInProgressHook();
  // 2. 标准化依赖数组
  const nextDeps = deps === undefined ? null : deps;
  // 3. 将 [函数引用, 依赖数组] 存入 memoizedState
  //    注意：这里存的是函数本身，不是执行结果
  hook.memoizedState = [callback, nextDeps];
  // 4. 返回原始函数
  return callback;
}

function updateCallback<T>(callback: T, deps): T {
  // 1. 从 Hook 链表中按顺序取出对应的 Hook 节点
  const hook = updateWorkInProgressHook();
  // 2. 标准化新依赖数组
  const nextDeps = deps === undefined ? null : deps;
  // 3. 读取上次缓存的 [函数引用, 依赖数组]
  const prevState = hook.memoizedState;
  // 4. 依赖比较：使用与 useMemo 完全相同的算法
  if (nextDeps !== null) {
    const prevDeps = prevState[1];
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0];  // 🎯 返回缓存的函数引用
    }
  }
  // 5. 依赖变化，更新缓存为新函数
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

// useMemo：存储的是执行结果
hook.memoizedState = [nextCreate(), nextDeps];  // 先执行，再存结果
// useCallback：存储的是函数本身
hook.memoizedState = [callback, nextDeps];       // 不执行，直接存引用

const handleClick = useCallback(() => {
  console.log('clicked', count);  // count 是闭包捕获的值
}, [count]);

父组件渲染
    ↓
useCallback 返回同一个函数引用
    ↓
React.memo 对子组件 props 做浅比较
    ↓
引用没变 → 跳过子组件渲染 ✅
引用变了 → 子组件重渲染 ❌

// 父组件
function Parent() {
  const [count, setCount] = useState(0);
  // 不用 useCallback → 每次渲染创建新函数 → Child 重渲染
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);  // 空依赖，整个生命周期引用不变
  return (
    <>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
    </>
  );
}
// 子组件
const Child = React.memo(({ onClick }) => {
  console.log('Child rendered');  // 只有 onClick 引用变化时才打印
  return <button onClick={onClick}>Click</button>;
});

const fetchUser = useCallback((id) => {
  return api.get(`/users/${id}`);
}, []);
useEffect(() => {
  fetchUser(userId);  // fetchUser 引用稳定，Effect 只依赖 userId
}, [fetchUser, userId]);

const handleScroll = useCallback((e) => {
  setScrollY(e.target.scrollTop);
}, []);
// 配合节流/防抖时，稳定的引用很重要
useEffect(() => {
  const throttled = throttle(handleScroll, 100);
  window.addEventListener('scroll', throttled);
  return () => window.removeEventListener('scroll', throttled);
}, [handleScroll]);

// ❌ 仅组件内部使用、不传递给子组件的函数
const handleClick = useCallback(() => { setCount(c => c + 1); }, []);
// ✅ 直接写即可，没有优化收益
const handleClick = () => { setCount(c => c + 1); };
// ❌ 子组件没有用 React.memo 包裹
// useCallback 单独使用毫无意义，必须配合 memo 才能拦截重渲染

React.memo    → 拦截组件重渲染（组件级缓存）
useMemo       → 稳定数据引用（值级缓存）
useCallback   → 稳定函数引用（函数级缓存）

// 完整示例：带搜索和选择的商品列表
const ProductItem = React.memo(({ product, onSelect }) => {
  return (
    <li onClick={() => onSelect(product.id)}>
      {product.name} - ¥{product.price}
    </li>
  );
});
function ProductPage({ products, keyword }) {
  const [selected, setSelected] = useState(null);
  // 1. useMemo 缓存筛选结果，避免每次渲染都遍历
  const filtered = useMemo(() => {
    const lower = keyword.toLowerCase();
    return products.filter(p => p.name.toLowerCase().includes(lower));
  }, [products, keyword]);
  // 2. useCallback 稳定回调引用，配合 React.memo 生效
  const handleSelect = useCallback((id) => {
    setSelected(id);
  }, []);
  return (
    <ul>
      {filtered.map(p => (
        <ProductItem key={p.id} product={p} onSelect={handleSelect} />
      ))}
    </ul>
  );
}

// ❌ 忘记把 filter 加入依赖
const filtered = useMemo(() =>
  items.filter(i => i.category === filter), [items]);
// ✅ 所有响应式变量都要加入依赖
const filtered = useMemo(() =>
  items.filter(i => i.category === filter), [items, filter]);

// ❌ 依赖写空数组，total 永远是初始值
const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), []);

// ❌ 依赖为空，count 永远是初始值 0
const increment = useCallback(() => {
  setCount(count + 1);
}, []);
// ✅ 使用函数式更新
const increment = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

// React 19 + Compiler 开启后，以下代码会被自动优化
function Component({ items }) {
  const total = items.reduce((s, i) => s + i.price, 0);  // 自动 memo
  const handleClick = () => { console.log('click'); };    // 自动 callback
  return <div>{total}</div>;
}