useMemo

useMemo

useMemo 是一个 React Hook，它用于优化渲染性能。useMemo 会接收一个箭头函数包裹的回调函数和依赖项数组，然后返回回调函数的计算结果。当依赖项数组中的某个值发生变化时，useMemo 会重新计算回调函数。如果依赖项没有发生变化，useMemo 会返回上一次计算的结果，这样可以避免不必要的计算。

useMemo 的基本语法如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在这个示例中，computeExpensiveValue 是一个执行开销较大的计算函数，它接收两个参数 a 和 b。useMemo 的第一个参数是一个箭头函数，该函数会计算出一个值。第二个参数是一个依赖项数组，当数组中的任何值发生变化时，箭头函数将重新执行。

useMemo 的主要用途：

1. 优化性能：当组件重新渲染时，useMemo 可以避免重复执行开销较大的计算。这对于性能敏感的应用程序非常有用。

2. 尽量保持引用不变：当使用引用类型（如对象或数组）作为依赖项时，useMemo 可以确保引用在依赖项未发生变化时保持不变。这有助于避免不必要的组件重新渲染。

这里的意思是，在useEffect的依赖项中一般不使用对象或者函数类型的依赖项，因为它们在更新的时候引用常常会发生改变，而它们的引用改变又会导致组件的更新，这将会导致无限渲染，但是若一定要用对象或者函数作为useEffect依赖项，那么可以把这个对象或者是函数放在useMemo中保存一次，这样，如果对象或者是函数在发生变化时能尽量拿取原值，而不改变引用。

需要注意的是，useMemo 只能用作优化手段，而不应该用于实现语义上的正确性。因为在某些情况下，React 可能会为了性能原因而跳过 useMemo，导致创建函数被重新执行。

总之，useMemo 是一个用于优化性能的 React Hook，它可以帮助你避免重复执行开销较大的计算和保持引用不变性。请谨慎使用它，并确保你在确实需要时才使用它，以避免过度优化。

useMemo面试题

1. 什么是 useMemo，以及它的作用是什么？

useMemo 是一个 React Hook，用于在组件重新渲染时避免不必要的计算和渲染。它会返回一个 memoized 值，这个值只会在依赖项发生变化时重新计算。

2. 请解释 useMemo 的基本语法。

useMemo 的基本语法如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

其中 computeExpensiveValue 是一个耗时计算函数，a 和 b 是依赖项。

3. 在什么情况下应该使用 useMemo？

当有一个昂贵的计算操作，且该操作的输入值在多次渲染之间不会发生变化时，应使用 useMemo。这可以避免在每次渲染时都执行昂贵的计算。

4. 与 useMemo 相比，useCallback 的作用和用法有何不同？

useCallback 用于 memoizing 回调函数，而 useMemo 用于 memoizing 计算出的值。useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

5. 如果依赖项数组为空，useMemo 的行为会有什么变化？

如果依赖项数组为空，useMemo 只会在组件首次渲染时计算 memoized 值，后续渲染将重用这个值，而不进行重新计算。

6. 在性能优化方面，useMemo 和 React.memo 有什么区别？

useMemo 用于避免不必要的计算操作，而 React.memo 是一个高阶组件，用于避免不必要的组件渲染。React.memo 通过对组件的 props 进行浅比较来实现性能优化。

7. 使用 useMemo 时有哪些注意事项？

使用 useMemo 时的注意事项：

• 不要过度优化。只有在计算昂贵或组件渲染性能出现问题时才使用。
• 不要将依赖项数组省略，以免导致潜在的 bug。
• 避免在 useMemo 的依赖项中包含不稳定的值，例如内联函数或对象，因为这可能导致不必要的重新计算。

8. useMemo 是如何确保引用不变性的？

useMemo 通过将计算结果存储在内部，并在依赖项发生变化时才重新计算，从而确保引用不变性。当依赖项没有发生变化时，useMemo 返回的值引用保持不变。

9. 请提供一个实际示例，说明如何使用 useMemo 优化组件渲染性能。

使用 useMemo 优化组件渲染性能的示例：

const ExpensiveComponent = ({ a, b }) => {
  const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  return <div>{result}</div>;
};

在此示例中，computeExpensiveValue 只有在 a 或 b 发生变化时才重新计算。

10. 在函数组件中，如何使用 useMemo 替代类组件中的 shouldComponentUpdate？