useMemo 是一个用于性能优化的 Hook，它可以缓存计算结果

在 React 中，useMemo 是一个用于性能优化的 Hook，它可以缓存计算结果，避免在每次渲染时都重新执行昂贵的计算。

基本语法

const memoizedValue = useMemo(() => {
  // 执行需要缓存结果的计算逻辑
  return expensiveCalculation(a, b);
}, [a, b]); // 依赖数组

作用

• 缓存计算结果：当依赖项（第二个参数数组中的值）没有发生变化时，useMemo 会返回上一次计算的结果，而不是重新执行计算函数。
• 优化性能：对于避免在每次组件渲染时都执行耗时的计算（如复杂的数据处理、大量数据过滤等），从而提升组件性能。

使用场景

1. 昂贵的计算：当有需要消耗较多资源的计算操作（如大数据量处理、复杂算法）时，使用 useMemo 缓存结果。

   const filteredList = useMemo(() => {
     // 假设 data 是一个很大的数组
     return data.filter(item => item.value > threshold);
   }, [data, threshold]); // 只有 data 或 threshold 变化时才重新过滤

1. 防止不必要的重渲染：当把一个对象或函数作为 props 传递给子组件时，若该对象/函数在每次渲染时都会重新创建，可能导致子组件不必要的重渲染。使用 useMemo 可以缓存该值。

   const userInfo = useMemo(() => ({
     name: userName,
     age: userAge
   }), [userName, userAge]); // 只有当 userName 或 userAge 变化时才重新创建对象

   return <UserComponent info={userInfo} />;

注意事项

• 不要过度使用：useMemo 本身也有一定的开销（需要比较依赖项），对于简单的计算，直接执行可能比使用 useMemo 更高效。
• 依赖项必须完整：依赖数组中需要包含计算逻辑中使用的所有外部变量，否则可能导致缓存的结果与预期不符。
• 与 useCallback 的区别：useMemo 用于缓存计算结果（任意类型的值），而 useCallback 专门用于缓存函数。两者原理类似，都是基于依赖项进行缓存。

总之，useMemo 是 React 性能优化的重要工具，但应在确实存在性能问题时使用，避免过早优化。