React Hooks API中的useMemo和useCallback都是用于优化性能的钩子，但它们的用途和工作方式略有不同：
推荐大家看看我过往的文章
useMemo
useMemo是一个性能优化钩子，它返回一个记忆化的值。useMemo可以避免在组件渲染时进行昂贵的计算或操作，通过记忆化的方式缓存计算结果，仅当依赖项发生变化时才重新计算。
用途:
- 当你需要执行一些计算密集型的操作，而这些操作的结果在组件的多个渲染之间不会改变时，使用
useMemo可以避免不必要的重新计算。
示例:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
在这个例子中，computeExpensiveValue函数只有在a或b改变时才会重新执行。
useCallback
useCallback钩子返回一个记忆化的回调函数。这个回调函数仅在其依赖项发生变化时才会重新创建。
用途:
- 当你将回调函数传递给经过优化的子组件，并且这些子组件会对其props进行浅比较时，使用
useCallback可以避免子组件不必要的重新渲染。 - 它特别适用于传递给如
useEffect、useMemo或类组件的shouldComponentUpdate方法中的回调函数。
示例:
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
在这个例子中，传递给useCallback的函数只有在a或b改变时才会重新创建。
区别
- 记忆化内容:
useMemo记忆化一个值（可以是计算结果），而useCallback记忆化一个函数。 - 使用场景:
useMemo通常用于避免昂贵的计算，useCallback用于避免创建函数，特别是那些作为props传递给子组件的函数。 - 依赖项: 两者都接受一个依赖项数组，但
useMemo的依赖项影响计算结果的重新计算，而useCallback的依赖项影响回调函数的重新创建。
总结
- 使用
useMemo来记忆化那些在渲染过程中可能重复执行的计算结果。 - 使用
useCallback来记忆化回调函数，以避免在子组件中不必要的渲染。
正确使用这两个钩子可以帮助你优化React组件的性能，尤其是在处理大型列表或复杂组件时。
更多前端面试题 需要的同学转发本文+关注+【点击此处】即可获取！ 加油复习
