看到“memo”这个字眼,很多人应该会想到memo
方法。这是一个高阶函数,它会返回一个函数组件,作用相当于PureComponent
。
而useMemo
的作用也有点像,只不过它不是作用在函数组件上,而是在一段逻辑上,例如:
const [count, setCount] = useState(0);
const doubleCount = useMemo(() => {
return 2 * count;
}, [count]);
useMemo
的用法与useEffect
非常相似,如果第二个参数为空则函数组件每次被渲染,useMemo
内的逻辑都会被执行。如果第二个参数为一个空数组,那么仅会在组件第一次被渲染时执行。其他的情况都是在数组内元素完全相同时才不执行。
那么上面代码中的doubleCount
是依赖count
计算出来的,那么很显然当count
没有发生变化,doubleCount
计算出的结果也不会变化,因此也就没有必要重复计算,这就是useMemo
最主要的作用,就是性能优化的手段。
在上面的代码中,useMemo
内的计算依赖于count
,因此需要把count
添加到第二个参数中。理论上所有useMemo
内依赖的变量都一个添加到第二个参数中。
需要注意的是,useMemo
尽管看起来跟useEffect
用法很像,但是useEffect
是执行在渲染完成后,而useMemo
则是在渲染期间执行的,所以useMemo
中不要执行一些有副作用的操作。
给子组件传递回调函数时,会出现因为每次传递给子组件的回调函数的句柄不同(逻辑相同)而出现的不必要的渲染。因此我们希望能够传递给子组件句柄相同的回调函数。那么就可以用到useMemo
了:
const callback useMemo(()=>{
return () => {
console.log('this is a callback');
}
}, [])
而useCallback
就可以理解为一个语法糖,它省略了return
:
const callback useCallback(()=>{
console.log('this is a callback');
}, [])