【Q073】useMemo 和 useCallback 的区别

[kangyana]

1. useCallback

useCallback 的参数

• callback，需要执行的函数
• deps，需要引入的外部参数或者是依赖参数

const handleChildrenCallback = useCallback(() => {
  handleChildren();
}, [])

useCallback 的返回值

返回一个 memoized 回调函数。 在依赖参数不变的情况下，返回的回调函数是同一个引用地址。 只有在依赖参数更新时，返回一个新的 memoized（地址发生改变）。

useCallback 使用场景

配合 memo 用于优化子组件的渲染次数。

2. useMemo

useMemo 的作用是避免在每次渲染时都进行高开销的计算的优化的策略。

useMemo 的参数（与useMemo相同）

• callback，需要执行的函数
• deps，需要引入的外部参数或者是依赖参数

useMemo 的返回值

返回一个 memoized 值。 在依赖参数不变的的情况返回的是上次第一次计算的值。

useMemo 使用场景

优化针对于当前组件高开销的计算，缓存计算值。

3. 总结

相同之处

• 参数相似。
• 都是用来做缓存。

不同之处

• useCallback 返回缓存的函数，useMemo 返回缓存的值。
• useCallback 常用于优化子组件渲染，useMemo 常用于优化状态的计算。