认识useMemo

113 阅读1分钟

在前端开发的过程中,我们需要缓存一些内容,以避免在需渲染过程中因大量不必要的耗时计算而导致的性能问题。为此 React 提供了一些方法可以帮助我们去实现数据的缓存,useMemo 就是其中之一

userMemo的用法和特性

useMemo 有2个参数 一个回调函数 一个依赖, 回调函数里必须有 返回值, useMemo 的特性是 缓存 return 出来的值, 如果依赖为空 useMemo 缓存的值永远不会改变, 如果依赖改变 缓存的值会重新发生改变

案例

image.png

如上图当我们没有给userMemo依赖时每次点击时useMemo都会触发就会造成不必要的重复计算,而浪费性能

image.png

当我们给useMemo依赖时,只有依赖发生改变才会触发useMemo函数可以避免重复计算