这里默认你对React有一定的了解,并且知道React的更新机制,比如什么是state和props
一、WHY
我们为什么要用?useMemo和useCallback只应作用于性能优化。如果代码在没有它的情况下无法运行,请找到根本问题并首先修复它,然后再使用。大部分时候你可能用不到它们,或者说没必要用。但是当我们想仅仅在依赖发生改变时进行调用计算或者函数,就很有必要了
二、useMemo和useCallback的作用
- useMemo:缓存计算的结果,也就是第一个参数的返回值,依赖值更新时才会从新进行计算(如果是单纯的函数调用,每次state/props更新都会导致函数从新计算,所以useMemo是性能优化)
const [num, setNum] = useState<number>(0);
/**
* memodResult:函数的返回值
* 第一个参数是一个有返回值的函数
* 第二个参数是一个数组,数组中的值发生变化时,函数才会重新执行
*/
const memodResult = useMemo(() => {
let result = num;
/**
* 进行一些昂贵的计算
* ...
*/
return result
// 如果是[],每次返回值就是0
}, [num])
return (
<div className={styles.wrap}>
<button onClick={() => {
setNum(num + 1)
}}>btn</button>
<h1>{memodResult}</h1>
</div>
);
在初次渲染时,useMemo 返回不带参数调用 函数 的结果。
在接下来的渲染中,如果依赖项没有发生改变,它将返回上次缓存的值;否则将再次调用 函数,并返回最新结果。
- useCallback:和useMemo很像,但是缓存的是整个函数
//father
const [num, setNum] = useState<number>(0);
const callbackFun = useCallback(() => {
console.log(num)
}, [num])
return (
<div className={styles.wrap}>
<button onClick={() => {
setNum(num + 1)
}}>btn</button>
<SubPage callbackFun={callbackFun} />
</div>
);
// SubPage
const { callbackFun } = props;
return (
<div>SubPage
<button onClick={() => {
callbackFun()
console.log(callbackFun)
/**
* ƒ () {
* console.log(num);
* }
*/
}}>SubPageBtn</button>
</div>
);
你可能会想,和我直接传递函数没有什么区别,为什么要这么麻烦呢?
是的,通常情况完全没有必要,这么做是为了缓存这个函数,也就是说只有依赖项更新时,才会更新这个函数。
上边的例子中,我们在父组件里按钮点击两次,num变成了2,在SubPage中调用这个方法num也是2。也就是useCallback的函数进行了两次更新,得到最新的函数。
这时候我们进行一下修改,去掉依赖的值
const callbackFun = useCallback(() => {
console.log(num)
}, [])
这时候我们更新num之后,再次调用callbackFun(),会发现值还是0,useCallback的函数并没有进行更新,缓存了下来。
三、使用场景
由于React的渲染机制,父组件更新时,所以的子组件都会更新,如果我们不希望这么做,希望在自己特定的情况下进行更新,那么可以这样。
// 父组件
const[num, setNum] = useState<number>(0);
const [num2, setNum2] = useState<number>(0);
/**
* 缓存的是函数,如果依赖不变那么函数不会更新
*/
const callbackFun = useCallback(() => {
console.log(num);
}, [num]);
return (
<div className={styles.wrap}>
<button
onClick={() => {
setNum(num + 1);
}}
>
btn
</button>
<button
onClick={() => {
setNum2(num2 + 1);
}}
>
btn2
</button>
<SubPage callbackFun={callbackFun} />
</div>
);
//子组件
import { memo } from "react";
function SubPage(props: { callbackFun: any; }) {
const { callbackFun } = props;
console.log('SubPage')
return (
<div>SubPage
<button onClick={() => {
callbackFun()
}}>SubPageBtn</button>
</div>
);
}
export default memo(SubPage);
子组件我们使用memo进行了包裹,他的作用就是props没有变化的时候不更新,即使父组件进行了多次的更新。
当父组件的num进行更新时,我们更新了callbackFun,同时也会更新SubPage,这时候我们拿到了想要的结果,同时就减少了子组件的更新次数。
四、你应该在所有地方添加 useMemo 或者useCallback吗?
如果你是一个简单的网页,并且大多数交互都很粗糙(例如替换页面或整个部分),则通常不需要缓存。另一方面,如果你的应用更像是一个绘图编辑器,并且大多数交互都是精细的(如移动形状),那么你可能会发现缓存非常有用。