useCallback 和 useMemo 的区别

useCallback 和 useMemo 的区别

前言，刚看官方文档的时候。也许会觉得他们很像，或者认为useCallback 是 useMemo的语法糖 🍬

其实不然，他们虽然说都是 “性能优化” 的手段，他们的用法和关注层面还是有点不一样

01 useCallback

用法：

1
2
3
const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

关注：

useCallback 一般用于函数更新，返回一个新的方法

02 useMemo

用法：

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

关注：

useMemo 一般用于组件中变量，返回变量值