Skip to main content

memo 和 useMemo 和 useCallback 的区别

相同点:

  • 它们都可以用来缓存数据,避免子组件的无效重复渲染。

不同点:

  • React.memo 是一个高阶组件,useMemo 是一个 hook。

联系:

  1. 当我们的父子组件之间不需要传值通信时,可以选择用 React.memo 来避免子组件的无效重复渲染。
  2. 但我们的父子组件之间需要进行传值通信时,React.memo 和 useMemo 都可以使用。
  3. 但我们的父子组件之间需要进行函数通信时,可以选择用 useCallback 来避免子组件的无效重复渲染。
  4. useCallback 必须配合 memo 使用,memo 负责浅比较,useCallback 负责自定义比较

不足:

  • useEffect、useMemo、useCallback 反映的是当前的状态,无法使用它们来捕获上一次的状态。对于这种情况,我们应该使用 ref 来访问。

预览地址

参考文章