React中的useCallback跟useMeno的区别

前言

这里主要讲讲React中两个类似的hook，useCallback以及useMeno的区别，简单来讲就是

useMeno是内部返回的一个值
useCallback是内部返回的一个当前函数

---

一、example

1.1 useCallback

正常来说，当处理sideEffect的时候，useEffect的第二个参数会传一个dependence list，只有当list中地参数变化时候，这个effect才会被重新触发，比如

React.useEffect(() => {
  window.localStorage.setItem('count', count)
}, [count]) 

这里只有当count变化的时候，才会setItem(‘count’, count)到localstorage

这里的count是变量，如果是函数的话，就没那么简单了

const updateLocalStorage = () => window.localStorage.setItem('count', count)

React.useEffect(() => {
  updateLocalStorage()
}, [updateLocalStorage]) 

useEffect是定义在再component的函数体内的，一旦component被render，updateLocalStorage就会被重新initialised，所以dependency list中的updateLocalStorage肯定是会变化的，也就是useEffect每次都会因为component更新而重新执行

于是，useCallback就可以用上场了；updateLocalStorage 函数使用useCallback包裹，把count定义成它的dependency

const updateLocalStorage = React.useCallback(
  () => window.localStorage.setItem('count', count),
  [count], 
)
React.useEffect(() => {
  updateLocalStorage()
}, [updateLocalStorage])

1.2 useMeno

React可以让我们把所有的逻辑以及state management都放在一个function下面管理，但是这也带来一个limitation，那就是每次render所有的计算都需要执行一遍，不管组件内的计算是否有必要执行，比如

function Distance({x, y}) {
  const distance = calculateDistance(x, y)
  return (
    <div>
      The distance between {x} and {y} is {distance}.
    </div>
  )
}

如果这个组件的父组件re-render了，或者某些不相干的state触发了re-render，calculateDistance方法都会被执行，这就会带来performance瓶颈

这时候如果使用了useMemo

function Distance({x, y}) {
  const distance = React.useMemo(() => calculateDistance(x, y), [x, y])
  return (
    <div>
      The distance between {x} and {y} is {distance}.
    </div>
  )
}

这就是可以让calculateDistance的计算只会在x或者y变化的时候才触发，减少了无意义的计算

---

总结

useMeno跟useCallback作用类似，useMeno是内部返回的一个值，useCallback是内部返回的一个当前函数