react的useMemo

React 的 useMemo 是一个用于优化性能的钩子函数，它可以在组件渲染过程中缓存计算结果，避免重复计算。

在 React 组件中，当某个值发生变化时，组件会重新渲染，这可能会导致性能问题。而使用 useMemo 可以避免这种情况，它接收两个参数：一个是需要缓存的计算函数，另一个是依赖项数组。

当依赖项数组中的值发生变化时，useMemo 会重新计算计算函数的返回值，并将其缓存起来。如果依赖项数组中的值没有变化，则 useMemo 直接返回之前缓存的结果。

使用 useMemo 的一个常见场景是在组件中进行一些复杂的计算或者处理大量数据时，通过缓存计算结果可以避免不必要的重复计算，提升组件的性能。

以下是一个使用 useMemo 的示例：

import React, { useMemo } from 'react';

function MyComponent({ data }) {
  const result = useMemo(() => {
    // 这里可以进行复杂的计算操作
    // 可以使用 data 做计算，并返回结果
    return /* 计算结果 */;
  }, [data]); // 依赖项数组，当 data 发生变化时，重新计算

  return (
    <div>
      {/* 使用 result 进行渲染 */}
    </div>
  );
}

在上面的例子中，当 data 发生变化时，useMemo 会重新计算计算函数中的逻辑，并将结果缓存起来。而在组件重新渲染时，直接使用缓存的结果，避免重复计算。