useMemo 是 React 中的一个 Hook，它用于缓存计算结果，以避免在每次组件渲染时都重新计算昂贵的操作。通过记住某个计算结果，直到依赖项发生变化，useMemo 能够提高应用的性能，特别是在处理复杂计算或重渲染较为频繁的组件时。

基本用法

useMemo 接收两个参数：一个“创建”函数和一个依赖数组。它返回的是这个“创建”函数的返回值。

const memoizedValue = useMemo(() => {
  // 执行一些计算
  return computeExpensiveValue(a, b);
}, [a, b]); // 依赖项列表

只有当依赖项 a 或 b 发生变化时，才会重新计算 computeExpensiveValue(a, b)。如果依赖项列表没有变化，则 useMemo 会返回上一次计算的值。

useMemo 和 useCallback 的区别

• useMemo 用于缓存计算结果，以避免在每次渲染时重复执行昂贵的计算。
• useCallback 用于缓存函数实例，以保持函数引用的一致性，避免因函数引用变化而导致的不必要渲染。

简而言之，useMemo 是为了性能优化而记住计算结果的，而 useCallback 是为了记住函数本身的。

示例

假设我们有一个组件，它接收一个列表，并计算这个列表中所有数字的总和。如果这个列表很大，我们就可以使用 useMemo 来避免在每次渲染时都重新计算总和。

const TotalSum = ({ numbers }) => {
  const total = useMemo(() => {
    console.log('Calculating total sum...');
    return numbers.reduce((sum, num) => sum + num, 0);
  }, [numbers]);

  return <div>Total Sum: {total}</div>;
};

在这个例子中，只有当 numbers 数组改变时，total 的计算才会重新执行。如果组件因其他 state 或 props 的变化而重新渲染，但 numbers 数组保持不变，useMemo 会返回上一次计算的 total 值，从而避免不必要的计算。

注意事项

• 使用 useMemo 可以提高性能，但也不应过度使用。不是所有计算都需要被缓存，特别是那些计算代价不高的情况。过度使用 useMemo 可能会增加内存的使用，同时也会使得代码变得更复杂。
• useMemo 不保证被缓存的值一定不会被重新计算，React 可能会在内存不足等情况下清除缓存的值。因此，useMemo 主要用于性能优化，而不应用于语义上绝对需要缓存的计算。

总的来说，useMemo 是 React 中一个有用的 Hook，它通过缓存复杂计算的结果来帮助优化性能，但应谨慎使用，避免不必要的性能开销和复杂性。

个人总结

等价于Vue中的计算属性，使用该钩子的考量：计算的复杂度与内存中缓存值的比较，复杂度低的计算可以不进行缓存