useMemo
useMemo 是一个 React Hook，它用于优化渲染性能。useMemo 会接收一个箭头函数包裹的回调函数和依赖项数组，然后返回回调函数的计算结果。当依赖项数组中的某个值发生变化时，useMemo 会重新计算回调函数。如果依赖项没有发生变化，useMemo 会返回上一次计算的结果，这样可以避免不必要的计算。
useMemo 的基本语法如下：
javascript">const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
在这个示例中，computeExpensiveValue 是一个执行开销较大的计算函数，它接收两个参数 a 和 b。useMemo 的第一个参数是一个箭头函数，该函数会计算出一个值。第二个参数是一个依赖项数组，当数组中的任何值发生变化时，箭头函数将重新执行。
useMemo 的主要用途：
-
优化性能：当组件重新渲染时，
useMemo可以避免重复执行开销较大的计算。这对于性能敏感的应用程序非常有用。 -
尽量保持引用不变：当使用引用类型（如对象或数组）作为依赖项时，
useMemo可以确保引用在依赖项未发生变化时保持不变。这有助于避免不必要的组件重新渲染。
这里的意思是，在useEffect的依赖项中一般不使用对象或者函数类型的依赖项，因为它们在更新的时候引用常常会发生改变，而它们的引用改变又会导致组件的更新，这将会导致无限渲染，但是若一定要用对象或者函数作为useEffect依赖项，那么可以把这个对象或者是函数放在useMemo中保存一次，这样，如果对象或者是函数在发生变化时能尽量拿取原值，而不改变引用。
需要注意的是，useMemo 只能用作优化手段，而不应该用于实现语义上的正确性。因为在某些情况下，React 可能会为了性能原因而跳过 useMemo，导致创建函数被重新执行。
总之，useMemo 是一个用于优化性能的 React Hook，它可以帮助你避免重复执行开销较大的计算和保持引用不变性。请谨慎使用它，并确保你在确实需要时才使用它，以避免过度优化。
useMemo面试题
1. 什么是 useMemo，以及它的作用是什么？
useMemo 是一个 React Hook，用于在组件重新渲染时避免不必要的计算和渲染。它会返回一个 memoized 值，这个值只会在依赖项发生变化时重新计算。
2. 请解释 useMemo 的基本语法。
useMemo 的基本语法如下：
javascript">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 优化组件渲染性能的示例：
javascript">const ExpensiveComponent = ({ a, b }) => {
const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return <div>{result}</div>;
};
在此示例中，computeExpensiveValue 只有在 a 或 b 发生变化时才重新计算。
