理解react hook中useCallback和useMemo的区别以及应用场景
彻底理解 React hook useCallback和useMemo的区别
useCallback :
场景:
父组件中有状态 A 、状态 B ,函数 C(函数 C 中只使用到了状态 B) ,父组件需要将 函数 C 传递给子组件使用。
不使用 useCallback 的情况(子组件使用 memo() 函数进行优化):父组件中的状态 A 发生了改变,导致父组件重新渲染,虽然 子组件状态没有改变,使用到的 父组件传递过来的函数 C 也没有改变,但是子组件还是要同父组件一起重新渲染一次。
使用 useCallback 的情况(子组件使用 memo() 函数进行优化):
const 函数 C 的 memorize 版 = useCallback(() => {
函数 C ();
}, [状态 B])
将 函数 C 的 memorize 版
传递给子组件,那么当父组件中的状态 A 发生了改变,导致父组件重新渲染时,由于子组件使用到的 <