React 中 memo useMemo useCallback 到底该怎么用

更新时间：2022年10月22日 08:38:13 作者：YinJie…

在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender

React.memo怎么用

React.memo()是一个高阶组件 (HOC)，它接收一个组件A作为参数并返回一个组件B，如果组件B的 props（或其中的值）没有改变，则组件 B 会阻止组件 A 重新渲染。

下面我们看一个示例：

const ParentComponent = () => {
  const [ count, setCount ] = useState(0);
  const handleParent = () => {
    console.log('clicked ParentComponent');
    setCount(preCount => preCount + 1);
  };
  return (
    <div>
      <div onClick={handleParent}>父组件，点击了{count}次</div>
      <ChildrenComponent />
    </div>
  );
};
const ChildrenComponent = () => {
  console.log('ChildrenComponent rending');
  return <div>我是子组件</div>;
};

点击父组件：

可以看到控制台中输出了子组件里的打印，表示子组件 rerender 了，如果子组件中有庞大的 dom 结构和计算，那是非常消耗性能的事，通过 memo 我们可以对比 render 前后的 prop 变化，如果没有变化就不会重新 render 子组件：

const ChildrenComponent = memo(() => {
  console.log('ChildrenComponent rending');
  return <div>我是子组件</div>;
});

把子组件通过 memo 包裹后就不会因为父组件更新导致的 render 了

React.useMemo怎么用

React.memo() 是一个 HOC，而 useMemo() 是一个 React Hook。使用 useMemo()，我们可以返回记忆值来避免函数的依赖项没有改变的情况下重新渲染。并且可以避免在每次渲染时都进行高开销的计算的优化的策略。

   const sum = ()=>{
      return a+b
   }
   const result = useMemo(()=>{sum()},[a,b])
   // 只有在a或者b的值变化时才会触发sum函数执行

React.memo()和useMemo()的主要区别

从上面的例子中，我们可以看到 React.memo() 和 useMemo() 之间的主要区别：

React.memo() 是一个高阶组件，我们可以使用它来包装我们不想重新渲染的组件，除非其中的 props 发生变化
useMemo() 是一个 React Hook，我们可以使用它在组件中包装函数。我们可以使用它来确保该函数中的值仅在其依赖项之一发生变化时才重新计算

虽然 memoization 似乎是一个可以随处使用的巧妙小技巧，但只有在绝对需要这些性能提升时才应该使用它。 Memoization 会占用运行它的机器上的内存空间，因此可能会导致意想不到的效果。

React.useCallback怎么用

我们看一下下面这个示例：

const ParentComponent = () => {
  const [ count, setCount ] = useState(0);
  const [ childCount, setChildCount ] = useState(0)
  const handleChildren = () => {
    console.log('clicked ChildrenComponent');
    setChildCount(preCount => preCount + 1)
  };
  const handleParent = () => {
    console.log('clicked ParentComponent');
    setCount(preCount => preCount + 1);
  };
  return (
    <div>
      <div onClick={handleParent}>父组件，点击了{count}次</div>
      <ChildrenComponent handleChildren={handleChildren} data={childCount}/>
    </div>
  );
};
const ChildrenComponent = memo(({ handleChildren, data }) => {
  console.log('ChildrenComponent rending', data);
  return <div onClick={handleChildren}>ChildrenComponent，子组件被点击了{data}次 </div>;
});

在上面的例子中，我们把子组件通过 React.memo 包起来了，希望在父组件更新的时候，子组件不会再次render，那么会和我们想的一样吗？

当点击父组件时，子组件再次 render 了，因为子组件的 prop 传入了有函数 handleChildren ，当点击父组件时更改了 state 值导致父组件重新 render，那么原来的 hanldeChildren 函数和更新后的 hanldeChildren 显然处在不同的执行环境中，他们并不是一个函数，在内存中不是同一个引用地址，所以就导致了 memo 的包裹无效，因为 prop 改变了。

useCallback 需要传入两个参数

callback（仅仅是个函数），把要做事情的函数放在callback函数体内执行
deps 要做事情的函数需要引入的外部参数或者是依赖参数

  const handleChildrenCallback = useCallback(() => {
    handleChildren();
  }, []);// 咱们不需要就不要传入

useCallback 返回一个 memoized 回调函数。在依赖参数不变的情况下，返回的回调函数是同一个引用地址

注意每当依赖参数发生改变useCallback就会自动重新返回一个新的 memoized 函数（地址发生改变）

上面就是没有使用 useCallBack 的使用场景，现在我们知道了，把要传递的函数参数通过 useCallBack 包裹一层，这样返回的回调函数就是同一个引用地址，这样子组件就不会 rerender 了：

 const handleChildren = useCallback(() => {
    console.log('clicked ChildrenComponent');
    setChildCount(preCount => preCount + 1)
  }, [setChildCount]);

现在在点击父组件后，子组件就不会再 rerender 了。

大伙现在应该明白了useCallback的作用了，它主要用来配合memo用于优化子组件的渲染次数

memo与useMemo及useCallback的区别

memo用来优化函数组件的重复渲染行为，针对的是一个组件
useMemo返回一个memoized的值
本质都是用同样的算法来判定依赖是否发生改变，继而决定是否触发memo或者useMemo中的逻辑，利用memo就可以避免不必要的重复计算，减少资源浪费
useCallback返回一个memoized的函数

防止不必要的 effect

如果一个值被 useEffect 依赖，那它可能需要被缓存，这样可以避免重复执行 effect。

const Component = () => {
  // 在 re-renders 之间缓存 a 的引用
  const a = useMemo(() => ({ test: 1 }), []);
  useEffect(() => {
    // 只有当 a 的值变化时，这里才会被触发
    doSomething();
  }, [a]);
  // the rest of the code
};

useCallback 同理：

const Component = () => {
  // 在 re-renders 之间缓存 fetch 函数
  const fetch = useCallback(() => {
    console.log('fetch some data here');
  }, []);
  useEffect(() => {
    // 仅fetch函数的值被改变时，这里才会被触发
    fetch();
  }, [fetch]);
  // the rest of the code
};

当变量直接或者通过依赖链成为 useEffect 的依赖项时，那它可能需要被缓存。这也是 useMemo 和 useCallback 得基本用法之一。

到此这篇关于React 中 memo useMemo useCallback 到底该怎么用的文章就介绍到这了,更多相关React memo useMemo useCallback内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React split实现分割字符串的使用示例
当我们需要将一个字符串按照指定的分隔符进行分割成数组时,我们可以在组件的生命周期方法中使用split方法来实现这个功能,本文就来介绍一下,感兴趣的可以了解下
2023-10-10
react MPA 多页配置详解
这篇文章主要介绍了react MPA 多页配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
解析TypeError:import_react_native.AppState.removeEventListener
这篇文章主要为大家介绍了TypeError:import_react_native.AppState.removeEventListener is not a function问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
React项目中动态插入HTML内容的实现
本文主要介绍了React项目中动态插入HTML内容的实现,通过使用React的dangerouslySetInnerHTML属性,我们可以将HTML内容插入到组件中,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
react dva实现的代码
dva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-router,fetch，可以激烈为一个轻量级的应用框架，这篇文章主要介绍了react dva实现,需要的朋友可以参考下
2021-11-11
React事件监听和State状态修改方式
这篇文章主要介绍了React事件监听和State状态修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
关于React16.0的componentDidCatch方法解读
这篇文章主要介绍了关于React16.0的componentDidCatch方法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
JavaScript React如何修改默认端口号方法详解
这篇文章主要介绍了JavaScript React如何修改默认端口号方法详解，文中通过步骤图片解析介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
基于visual studio code + react 开发环境搭建过程
今天通过本文给大家分享基于visual studio code + react 开发环境搭建过程，本文给大家介绍的非常详细，包括react安装问题及安装 Debugger for Chrome的方法，需要的朋友跟随小编一起看看吧
2021-07-07
Shopee在React Native 架构方面的探索及发展历程
这篇文章主要介绍了Shopee在React Native 架构方面的探索,本文会从发展历史、架构模型、系统设计、迁移方案四个方向逐一介绍我们如何一步步地满足多团队在复杂业务中的开发需求，需要的朋友可以参考下
2022-07-07