React useEffect useMemo useCallback区别要点

useEffect 渲染完毕后执行,产生副作用,依赖自身state时,不用setState,多数情况依赖props。

useMemo 组件首次加载和重渲染期间执行,缓存值,性能优化手段,对于当前组件高开销的计算优化。

useCallback 会在渲染期间执行,缓存函数,性能优化手段,对于子组件渲染优化,当做函数传递时候。

  • 请不要在这个useMemo函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo。
  • useMemo 返回缓存的 变量,useCallback 返回缓存的 函数。
  • 启动缓存是有代价的,开销小的变量和函数无需缓存,不然会适得其反。

react_logo

参考资料

https://blog.csdn.net/yoonerloop/article/details/125193784

https://blog.csdn.net/m0_57785190/article/details/118601740