react useMemo 作用

useMemo 是一个 Hook，在 React 中用于 memoization（记忆化），它可以帮助你在组件重新渲染时避免重复计算某些值。

useMemo 接受两个参数：

1. 一个函数，用于计算要 memoize 的值。
2. 一个依赖项数组，当依赖项数组中的值发生变化时，useMemo 会重新计算并返回新的值。

useMemo 的作用是：

1. 避免重复计算：当组件重新渲染时，useMemo 可以避免重复计算某些值，从而提高性能。
2. 缓存计算结果：useMemo 会缓存计算结果，当依赖项数组中的值没有变化时，useMemo 会直接返回缓存的结果，而不是重新计算。
3. 优化性能：在某些情况下，useMemo 可以帮助你优化性能，例如避免在每次渲染时重新计算某些复杂的值。

常见的使用场景：

1. 缓存计算结果：当你需要计算某些值，并且这个值不会频繁变化时，可以使用 useMemo 缓存计算结果。
2. 避免重复计算：当你需要在每次渲染时计算某些值，并且这个值的计算过程很耗时时，可以使用 useMemo 避免重复计算。

示例代码：

import { useMemo } from 'react';

function MyComponent() {
  const data = useMemo(() => {
    // 计算某些值
    return expensiveCalculation();
  }, [dependency1, dependency2]);

  return <div>{data}</div>;
}

在上面的示例中，useMemo 会缓存 expensiveCalculation() 的结果，当 dependency1 或 dependency2 发生变化时，useMemo 会重新计算并返回新的结果。