useMemo
和 useCallback
接收的参数都是一样,第一个参数为要执行的回调函数 第二个参数为要依赖的状态,react会监听这些状态当这些状态被更新会重新调用回调函数
共同作用:
当组件第一次渲染,会首次执行传入的回调的函数,接下来如果我们的组件树发生重新渲染,不会重新执行该函数而是直接取缓存的结果,仅仅只有依赖的状态发生改变才会重新调用回调函数计算缓存的结果。
1.仅仅 依赖数据
发生变化, 才会重新计算结果,也就是起到缓存的作用。
两者区别:
1.useMemo
计算结果是 return
回来的值, 主要用于 缓存计算结果的值 ,应用场景如: 需要花费大量内存(大量数组、数量)、每次js执行时间很长的函数(同步)
2.useCallback
计算结果是 函数
, 主要用于 缓存函数,应用场景如: 需要缓存的函数,因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新,一些函数是没有必要被重新刷新的,此时就应该缓存起来,提高性能,和减少资源浪费。
注意: 不要滥用会造成性能浪费,react中减少render就能提高性能,所以这个仅仅只针对缓存能减少重复渲染时使用和缓存计算结果。
推荐阅读(英文):https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js