useCallback和useMemo的区别？

前言

hello world欢迎来到前端的新世界

---

当前文章系列专栏：react.js
‍博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)
感谢大家支持！您的观看就是作者创作的动力

useCallback和useMemo都是React提供的用于性能优化的Hook，但它们的作用和应用场景有所不同。

useCallback

useCallback的作用是缓存函数，避免在每次渲染时都创建新的函数。当需要将一个回调函数作为props传递给子组件时，使用useCallback可以避免因为父组件的重新渲染而导致子组件的重复渲染。useCallback接收一个函数和一个依赖项数组作为参数。当依赖项数组发生变化时，会重新创建函数。如果依赖项数组为空，那么只会在组件挂载时创建一次函数。

应用场景

• 在父组件中定义回调函数，作为props传递给子组件时，避免子组件重复渲染。
• 在某个函数内部，定义了一个会被多次调用的回调函数，通过useCallback将其缓存，避免过度渲染。

useMemo

useMemo的作用是缓存计算结果，避免重复计算。当需要根据一些数据进行复杂的计算，或者从一个较大的数据集中过滤出一些数据时，可以使用useMemo来缓存计算结果，避免重复计算。useMemo接受两个参数：一个计算函数和一个依赖项数组。只有当依赖项数组发生变化时，才会重新计算。

应用场景

• 对于一些昂贵的计算，如大量字符串拼接、复杂的数据处理、使用昂贵的库等，可以使用useMemo将计算结果缓存。
• 对于某些数据的过滤、排序等操作，可以使用useMemo缓存计算结果，避免重复计算。

useCallback除了缓存回调函数还可以做什么操作？

除了缓存回调函数，useCallback本质上没有其他功能。它的主要作用是避免因为函数引用的变化而触发子组件的不必要重渲染，从而优化组件的性能。

但是在实际应用中，我们可以结合其他Hook和技巧，将useCallback与其他操作结合使用，以达到更好的效果，例如：

• 结合useEffect：在某些情况下，我们需要在回调函数执行之后执行一些副作用操作，例如更新某个状态、发送网络请求等。这时，我们可以在useEffect中传入回调函数和依赖项，当依赖项发生变化时，执行回调函数并进行副作用操作。

• 结合useRef：如果我们需要在多个地方使用同一个回调函数，但又不想通过props的方式来传递该函数，可以使用useRef来存储该函数，并在需要时调用。

• 结合useMemo：在某些情况下，我们需要在回调函数中进行一些计算，但又不想在每次渲染时重新计算。这时我们可以使用useMemo缓存计算结果，并将其与回调函数结合使用。

总之，useCallback是一个非常有用的Hook，可以帮助我们优化组件的性能。它虽然本质上只是缓存回调函数，但是结合其他Hook和技巧，可以发挥出更多的作用。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力