useMemo() 缓存钩子

98 阅读2分钟

1 . 作用

useMemo它使用来做缓存用的,只有当一个依赖项改变的时候才会发生变化,否则拿缓存的值,就不用在每次渲染的时候再做计算

2 . 使用场景

3 . 使用:

useMemo(参数1,参数2)

  • 参数1:是一个创建依赖项函数,该函数的返回值就是你想要缓存的数据,但形式上感觉挺想useEffect的,所以我才拿出来做对比,当然实际上两者却存在着很多差异
  • 参数2:这个是个数组,存放着被依赖的项,意思就是说只有当这个数组里面的变量发生了变化,才会调用参数1的函数,这里同样跟useEffect很像,都是依赖项变了,才会调用前面的参数1的函数
useMemo(() => { 
return (id: string | number) =>    likeIdList.indexOf(id) !== -1
}, [likeIdList])                                  }

4 . 作用

发现useMemo是在useEffect前面的,如果你之前对useEffct有了解的话,可能知道它可看成class组件里面的componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 而useMemo则可以看作是componentWillUpdate函数

顺序大概如下:

0971.png

5 . all in all:

useMemo基本用法就是这样,以及和useEffect的对比,当然还有与useMemo相对应的还有个useCallback,它是缓存函数