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