useMemo Hook 是 React 的一个内置 Hook，它可以帮助我们通过缓存计算结果来优化性能，只要依赖项没有变化，这个结果就会被重复使用。这可以防止在组件重新渲染期间，不必要的昂贵计算重复执行。
语法
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
- 第一个参数是一个返回计算值的函数。
- 第二个参数是依赖项数组。当这些依赖项中的任何一个发生变化时，该函数会被重新执行。
现在让我们来看看 useMemo 的一些实际应用场景
1. 优化昂贵的计算
让我们来看一个例子，其中我们有一个昂贵的计算，它不应该在每次渲染时都重新计算。
JavaScript
CODEBLOCK_fcf62bf9
输出结果
在这个例子中
- useState 用于管理 number（用户输入）和 counter（按钮点击次数）。
- useMemo 缓存了 squareNum(number) 的结果，只有在 number 发生变化时才会重新计算。
- 输入框在数值改变时更新 number 状态。
- 点击“计数器 ++”按钮会增加 counter 状态。
- 组件显示了输入内容、缓存后的平方值以及计数器。
2. 防止不必要的重新渲染
有时，将对象或数组作为 props 传递给子组件可能会因为引用变化而触发不必要的重新渲染。useMemo 可以帮助我们稳定这些值。
JavaScript
CODEBLOCK_c69706f9
#### 输出结果
在这个例子中
- 我们导入了 React, useState 和 useMemo 用于状态管理和优化。
- ChildComponent 显示 userInfo.name 并打印渲染日志。
- ParentComponent 使用 useMemo 缓存 userInfo，防止其被重新创建。
- 点击按钮会更新 count，导致 ParentComponent 重新渲染。
- ParentComponent 显示了 count、ChildComponent 和按钮。
何时使用 useMemo？
我们应该在以下情况使用 useMemo
- 我们有昂贵的计算，除非特定的依赖项改变，否则不需要重新执行。
- 我们正在处理大型数据集，并且需要优化性能。
- 我们希望通过确保稳定的引用来防止子组件不必要的重新渲染。
但是，我们要避免过度使用 useMemo，因为它可能会增加复杂性和内存开销。仅在必要时使用它。
使用 useMemo 进行性能优化
正确使用 useMemo 可以显著提升 React 应用的性能。然而，不当使用可能会导致不必要的内存使用和增加复杂性。以下是一些关键的考虑因素：
- 避免对微不足道的计算使用 useMemo： 如果计算量很小，记忆化可能会引入不必要的复杂性。
- 将其用于昂贵的计算： 诸如过滤大型数据集或执行密集型计算等任务可以从 useMemo 中受益。
- 稳定对象和数组的引用： 当将对象或数组传递给子组件时， useMemo 有助于保持相同的引用并防止不必要的重新渲染。
- 优化前先测量： 在引入 useMemo 之前，请务必使用 React DevTools 或性能分析工具分析应用的性能。
关键要点
- 性能优化： useMemo 有助于优化昂贵的计算。
- 防止不必要的重新渲染： 有助于稳定引用。