前言
这里主要讲讲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是内部返回的一个当前函数