【React Hook】- useMemo

useMemo

useMemo 是 React 提供的一个 Hook，用于优化性能，避免不必要的计算。它接受两个参数：一个计算函数和一个依赖数组。计算函数会在依赖数组中的值发生变化时重新计算，否则会返回上一次计算的结果。

import React, { useMemo } from 'react';

function MyComponent({ data }) {
  const expensiveCalculation = useMemo(() => {
    // 进行一些昂贵的计算
    return data.reduce((acc, item) => acc + item.value, 0);
  }, [data]);

  return (
    <div>Expensive Calculation: {expensiveCalculation}</div>
  );
}

在上面的例子中，expensiveCalculation 只会在 data 发生变化时重新计算，否则会返回上一次计算的结果。这样可以避免在每次渲染时都进行昂贵的计算，从而提高性能。

需要注意的是，useMemo 只能优化计算密集型的函数，对于简单的计算或者不需要优化的函数，使用 useMemo 可能会适得其反。

另外，useMemo 还可以用于缓存一些计算结果，避免重复计算。例如，可以缓存一些复杂的计算结果，然后在需要时直接使用，而不是每次都重新计算。

const cachedResult = useMemo(() => {
  // 进行一些复杂的计算
  return complexCalculation();
}, [dependency]);

// 在需要使用计算结果的地方直接使用
const result = cachedResult;    

在上面的例子中，cachedResult 只会在 dependency 发生变化时重新计算，否则会返回上一次计算的结果。这样可以避免在每次使用时都进行复杂的计算，从而提高性能。

需要注意的是，useMemo 只能缓存计算结果，不能缓存 DOM 元素。如果需要缓存 DOM 元素，可以使用 React.memo。

总结：useMemo 是 React 提供的一个 Hook，用于优化性能，避免不必要的计算。它可以接受一个计算函数和一个依赖数组，计算函数会在依赖数组中的值发生变化时重新计算，否则会返回上一次计算的结果。