useMemo 是 React 中的一个钩子函数，用于优化性能。它允许您在依赖项更改时缓存函数的结果，以减少不必要的计算。
useMemo 接受两个参数：一个函数和一个依赖项数组。第一个参数是您希望缓存的函数，第二个参数是影响函数计算的变量或状态的数组。
下面是一个使用 useMemo 的示例：
import React, { useMemo } from 'react';
function MyComponent({ num1, num2 }) {
const result = useMemo(() => {
console.log('Calculating result...');
return num1 + num2;
}, [num1, num2]);
return <div>{result}</div>;
}
export default MyComponent;
在上述示例中，我们定义了一个名为 MyComponent 的函数组件。使用 useMemo，我们将结果计算函数包装在一个缓存中。当 num1 或 num2 发生变化时，useMemo 会重新计算结果。
请注意，对于简单的计算，可能不需要使用 useMemo，因为它可能会引入不必要的额外开销。只有在函数计算非常昂贵或组件性能受到影响时，才建议使用 useMemo。
看到这个hooks，我们不禁思考，这个hooks和之前的memo函数的使用场景有什么不同？
事实上，它们看起来相似，但实际上在使用场景上有一些区别。
- useMemo 是 React 中的一个钩子函数，用于在函数组件中缓存计算结果。它接受一个函数和一个依赖项数组，并且在依赖项发生变化时重新计算函数的结果。useMemo 主要用于优化性能，避免不必要的计算。
- memo 是 React 中的一个高阶组件（HOC），用于在类组件或函数组件中进行浅层比较的性能优化。通过将组件包裹在 memo 中，只有在组件的 props 发生变化时，才会重新渲染该组件。memo 主要用于避免组件在没有必要的情况下重新渲染，从而提高性能。
基本上，useMemo 用于在组件内部缓存函数结果，而 memo 用于包装组件并在 props 更改时进行浅层比较。这两个工具都是为了优化性能而设计的，但在不同的场景下使用。
下面是一个示例，展示了如何同时使用 useMemo 和 memo：
import React, { useMemo, memo } from 'react';
function ExpensiveComponent({ prop1, prop2 }) {
// 使用 useMemo 缓存计算结果
const result = useMemo(() => {
console.log('Calculating result...');
return prop1 + prop2;
}, [prop1, prop2]);
return <div>{result}</div>;
}
// 使用 memo 包裹组件
const MemoizedComponent = memo(ExpensiveComponent);
export default MemoizedComponent;
在上述示例中，ExpensiveComponent 是一个需要进行昂贵计算的组件。通过使用 useMemo，我们将计算结果缓存起来，只有在 prop1 或 prop2 更改时才会重新计算。然后，通过使用 memo，我们对 ExpensiveComponent 进行包装，以确保只有在 props 发生变化时重新渲染。
