React 正确使用useCallback useMemo的方式

更新时间：2022年08月08日 14:34:51 作者：vs心动

这篇文章主要介绍了React 正确使用useCallback useMemo的方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下

正确使用useCallback useMemo的姿势

说起useCallback useMemo大家肯定在React都不陌生，但是真正了解它们的作用，还是有一部分同学对此是一知半解，只是知道用它，却不知道它真正的含义。
今天带大家学习一下它们的真正蕴藏的作用。
useCallback useMemo 都是记忆函数，什么是记忆函数呢？
用个最简单的例子来讲 useState 也是记忆函数细想一下以下代码，为什么setcount每次改变会引起组件重新render，但是count为什么不会再次被初始值0进行赋值呢？
如果是这样的话，我们就不能修改成功了，所以说存在某个地方保存了state的值，而这个地方是不会受到render的影响的，state就被缓存起来了。

const [count, setcount] = useState(0);

那么 useCallback useMemo 也是被缓存起来了吗？让我们逐个来看看

useCallback

useCallback 的作用是啥？我们来看看下面的代码：

import React, { memo, useCallback, useState } from "react";

const HookTest = memo(() => {
  const [count, setcount] = useState(0);
  const [num, setnum] = useState(100);
  const showCount = () => {
 	console.log("没事执行玩玩", count + "$");
  };
  return (
    <div>
      <h2>HookTest:useCallback----useMemo</h2>
      <h3>useCallBack</h3>
      <h4>
        count:{count}---num:{num}
      </h4>
      <button onClick={showCount}>showCount</button>
      <button onClick={(e) => setcount(count + 3)}>+3</button>
      <button onClick={(e) => setnum(num * 10)}>*10</button>
  );
});

export default HookTest;

正常执行的话，修改count 和 num 都会触发 render ，这是毫无疑问的。那么showCount 每次render也会被重新创建一次，这也是情理之中的。但是我们想想，真的有必要每次render都重新创建showCount 吗？现在可能只有一个函数，函数体也简单，重新创建也影响不了什么，但是真正开发的时候却是我们要考虑的问题。所以 useCallback 来帮我们解决这个问题了！

 const showCount = () => {
 	console.log("没事执行玩玩", count + "$");
  };
  
  const showCount = useCallback(() => {
    console.log("没事执行玩玩", count + "$");
  }, [count]);

useCallback 接收两个参数第一个为需要缓存的函数第二个为数组，装载依赖

那么现在的 showCount 和之前的又有什么不一样呢？
现在的 showCount 是被缓存起来了，组件render时，如果装载依赖的数组中的依赖未更新，那么依然采用缓存的函数。也就是说只有当我点修改count时触发更新组件render后，showCount 也重新创建，但是当我进行其他的操作引起组件render时，由于此时条件依赖跟装载依赖的数组中依赖毫无关系，showCount 用的是缓存里的函数。这就是 useCallback 的正确使用方法啦~

useMemo

看下面案例：

import React, { memo, useMemo, useState } from "react";

const HookTest = memo(() => {
const [count, setcount] = useState(0);
  const [arr, setarr] = useState([
    {
      flag: true,
      num: 20,
    },
    {
      flag: false,
      num: 10,
    },
    {
      flag: true,
      num: 40,
    },
    {
      flag: true,
      num: 60,
    },
    {
      flag: true,
      num: 70,
    },
    {
      flag: true,
      num: 80,
    },
  ]);

   const allNum = () =>
     arr.reduce(
       (preValue, currentValue) =>
         currentValue.flag ? preValue + currentValue.num : preValue,
       0
     );
  return (
    <div>
      <h2>HookTest:useCallback----useMemo</h2>
      <h3>useMemo</h3>
       <h4>
        count:{count}
      </h4>
      <button onClick={(e) => setcount(count + 3)}>+3</button>
      <h4>all:{allNum}</h4>
    </div>
  );
});
export default HookTest;

很简单的小案例，根据条件对数组求和操作，同样我们点击修改count 然后组件重新render
此时我们考虑一个问题，是不是 allNum 又进行了一次复杂的运行然后得到结果？现在看来才几条数据，怎么复杂了，我们得考虑数组若是几百上千上万呢？我们都知道组件渲染是很频繁的，那么每次渲染我们真的有必要去每次进行复杂的运算吗？

所以这就是性能优化的另一个点了引出 useMemo来帮助我们解决

将allNum 改造后：

const allNum = () =>
     arr.reduce(
       (preValue, currentValue) =>
         currentValue.flag ? preValue + currentValue.num : preValue,
       0
     );
  
  const allNum = useMemo(
    () =>
      arr.reduce(
        (preValue, currentValue) =>
          currentValue.flag ? preValue + currentValue.num : preValue,
        0
      ),
    [arr]
  );

useMemo 同样接收两个参数第一个参数是函数的返回值!! 第二个为数组，装载依赖
用了之后呢？有那些改变呢？
现在 allNum 不再是一个函数了，而是一个返回值现在如果进行和依赖数组无关的render时，allNum 将采用上次缓存的返回值，不用再去傻傻的计算一遍啦。

总结

简单给大家总结下：

useCallback 缓存函数
useMemo 缓存函数返回值
都是解决组件频繁渲染从而频繁创建函数及频繁运行函数
正确的思路应该是跟我有关的时候我才需要去重新创建函

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

您可能感兴趣的文章:

详解使用React进行组件库开发
本篇文章主要介绍了详解使用React进行组件库开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
React事件处理过程中传参的实现方法
这篇文章主要介绍了React事件处理过程中传参的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-10-10
React+Koa实现文件上传的示例
这篇文章主要介绍了React+Koa实现文件上传的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
react PropTypes校验传递的值操作示例
这篇文章主要介绍了react PropTypes校验传递的值操作,结合实例形式分析了react PropTypes针对传递的值进行校验操作相关实现技巧,需要的朋友可以参考下
2020-04-04
理解react中受控组件和非受控组件及应用场景
当涉及到React框架时,了解受控组件和非受控组件是非常重要的概念,本文主要介绍了理解react中受控组件和非受控组件及应用场景,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
关于react+antd样式不生效问题的解决方式
最近本人在使用Antd开发时遇到些问题,所以下面这篇文章主要给大家介绍了关于react+antd样式不生效问题的解决方式,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
antd中form表单的wrapperCol和labelCol问题详解
最近学习中遇到了些问题,所以给大家总结,下面这篇文章主要给大家介绍了关于antd中form表单的wrapperCol和labelCol问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
create-react-app开发常用配置教程
这篇文章主要为大家介绍了create-react-app开发常用配置教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
React css-in-js基础介绍与应用
随着React、Vue等支持组件化的MVVM前端框架越来越流行，在js中直接编写css的技术方案也越来越被大家所接受。为什么前端开发者们更青睐于这些css-in-js的方案呢，下面带你了解它
2022-09-09
react中使用echarts,并实现tooltip循环轮播方式
这篇文章主要介绍了react中使用echarts,并实现tooltip循环轮播方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01