useCallback与useMemo
ckangwen 2020-07-11
React API
# useCallback
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
1
2
3
4
5
6
2
3
4
5
6
回调函数仅在某个依赖项改变时才会更新，可以避免非必要渲染。
See the Pen useCallback演示 by ckw (@ckw) on CodePen.
子组件是一个被memo包裹的高阶组件，接受参数handleChildren，如果参数改变就会重新渲染。
在第一种情况中，传递给子组件的prophandleChildren使用了useCallback，返回一个memoized值
const handleChildrenCallback = useCallback(() => {
handleChildren();
}, []);
1
2
3
2
3
其依赖项为空，所以该函数永远不会改变，这样一来子组件就不会重新渲染。
而第二种情况中，将普通函数handleChildren传给了子组件
function handleChildren() {
setCount(prev => prev - 1)
}
1
2
3
2
3
父组件点击事件触发后，会更新count的值，使父组件重新渲染，而没有进行任何memoize操作的handleChildren会重新分配一个地址，与之前的函数不是同一个对象，所以子组件将会重新渲染。
# useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
1
把函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
See the Pen useMemo案例 by ckw (@ckw) on CodePen.
# 总结
- useCallback 优化针对于子组件渲染
- useMemo 优化针对于当前组件高开销的计算