useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据
共同作用:
1.仅仅 依赖数据 发生变化, 才会重新计算结果,也就是起到缓存的作用。
两者区别:
1.useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ,
应用场景如: 需要 计算的状态
const increment1 = useMemo(()=>{
return Math.random(count);
},[count])
2.useCallback 计算结果是 函数, 主要用于 缓存函数,
应用场景如: 在将一个组件中的函数,传递给子元素进行回调使用时,使用useCallback对函数进行处理
需要缓存的函数,因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新,一些函数是没有必要被重新刷新的,此时就应该缓存起来,提高性能,和减少资源浪费。
const increment2 = useCallback(()=>{
setCount(count + 1);
},[count])
3.useMemo替代useCallback
const increment2 = useMemo(()=>{
return () = > {
setCount(count + 1);
}
},[count])
注意: 不要滥用,会造成性能浪费,react中减少render就能提高性能,所以这个仅仅只针对缓存能减少重复渲染时使用和缓存计算结果。