在React中，与useMemo类似的Hook有哪些？

在 React 中，与 useMemo 类似用于性能优化、缓存数据或避免不必要计算的 Hook 主要有以下几个：

1. useCallback

• 作用：专门用于缓存函数，避免函数在每次组件渲染时重新创建。
• 与 useMemo 的关系：useCallback(fn, deps) 等价于 useMemo(() => fn, deps)，但更语义化地用于函数缓存。
• 使用场景：当需要将函数作为 props 传递给子组件时，避免因函数重新创建导致子组件不必要的重渲染。

  const handleClick = useCallback(() => {
    console.log('Clicked', id);
  }, [id]); // 仅当 id 变化时，函数才会重新创建

  return <ChildComponent onClick={handleClick} />;

2. useRef

• 作用：创建一个可变的 ref 对象，其 .current 属性可以存储任意值，且不会在组件重新渲染时重置。
• 与 useMemo 的区别：useRef 缓存的是“容器”（ref 对象），而 useMemo 缓存的是计算结果；useRef 的值变化不会触发组件重新渲染，而 useMemo 的依赖变化会触发重新计算。
• 使用场景：
  • 存储不需要触发渲染的变量（如定时器 ID、DOM 元素引用）。
  • 缓存上一次渲染时的值（如对比前后状态变化）。

  const prevValueRef = useRef();
  // 缓存上一次的值
  useEffect(() => {
    prevValueRef.current = currentValue;
  }, [currentValue]);
  const prevValue = prevValueRef.current;

3. useReducer（间接优化）

• 作用：用于管理复杂状态逻辑，通过 reducer 函数集中处理状态更新。
• 与 useMemo 的关联：虽然不直接缓存值，但可以减少因状态分散导致的不必要渲染。例如，当多个状态更新逻辑关联紧密时，用 useReducer 统一管理，避免频繁的状态分散更新触发渲染。

总结

• useCallback 是 useMemo 针对函数的“特化版本”，专门缓存函数。
• useRef 用于缓存不需要触发渲染的变量，更适合存储“持久化”数据。
• 这些 Hook 均服务于性能优化，但适用场景不同，需根据具体需求选择（避免过度优化）。