React -- useMemo()

54 阅读1分钟

useMemo() 记忆组件,完全可以替代 useCallback() ,并且发挥其他作用!!!

useCallback(fn , [] ) 等价于

useMemo(()=> fn , [])

  • 唯一的区别就是,useCallback() 不会执行第一个参数,而是直接把它的缓存返回给你,而useMemo() 是执行第一个函数,并且把该函数的执行结果返回给你!!!所以如果替代 useCallback() ,就把回调函数作为第一个参数的返回值返回出去就行!!!

  • useMemo() 更适合用来保存一些,需要经过计算得到的值!!从而达到性能优化!!!

1869.png

如上:

我们要获得的数据是需要进行filter过滤得到的,需要花费的时间不短,如果是页面的其他状态改变而导致的页面重新渲染,就会再次执行该计算过滤的逻辑,但其实得到的结果跟之前一样,此时就可以使用 useMemo() 把之前的数据保存下来,只有影响计算结果的状态改变了,才会重新执行计算逻辑进行重新计算!!!