Bootstrap

useMemo和useCallback的区别 及使用场景

参考文章

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就能提高性能,所以这个仅仅只针对缓存能减少重复渲染时使用和缓存计算结果。

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;