React 正确使用useCallback useMemo的方式

目录
  • 正确使用useCallback useMemo的姿势
  • 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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • react组件memo useMemo useCallback使用区别示例

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

  • React useMemo和useCallback的使用场景

    useMemo 我们知道当父组件发生重新渲染时,其所有(状态.局部变量等)都是新的.一旦子组件依赖于父组件的某一个对象变量,那么无论对象是否发生变化,子组件拿到的都是新的对象,从而使子组件对应的 diff 失效,依旧会重新执行该部分逻辑.在下面的例子中,我们的副作用依赖项中包含了父组件传入的对象参数,每次父组件发生更新时,都会触发数据请求. function Info({ style, }) { console.log('Info 发生渲染'); useEffect(() => { consol

  • react性能优化useMemo与useCallback使用对比详解

    目录 引言 对比 useMemo useCallback 引言 在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化.在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件.当时我们也知道,react中,性能的优化点在于: 调用setState,就会触发组件的重新渲染,无论前后的state是否不同 父组件更新,子组件也会自动的更新 基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState:在

  • React 正确使用useCallback useMemo的方式

    目录 正确使用useCallback useMemo的姿势 useCallback useMemo 总结 正确使用useCallback useMemo的姿势 说起useCallback useMemo大家肯定在React都不陌生,但是真正了解它们的作用,还是有一部分同学对此是一知半解,只是知道用它,却不知道它真正的含义.今天带大家学习一下它们的真正蕴藏的作用.useCallback useMemo 都是记忆函数,什么是记忆函数呢?用个最简单的例子来讲 useState 也是记忆函数 细想一下以

  • react中常见hook的使用方式

    1.什么是hook? react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state.ref.生命周期等属性. 2.为什么要出现hook? 函数式组件是全局当中一个普通函数,在非严格模式下this指向window,但是react内部开启了严格模式,此时this指向undefined,无法像类式组件一样使用state.ref,函数式组件定义的变量都是局部的,当组件进行更新时会重新定义,也无法存储,所以在hook出现之前,函数式组件有很大的局限性,通常情况下都会使

  • 详解react hooks组件间的传值方式(使用ts)

    目录 父传子 子传父 跨级组件(父传后代) 父传子 通过props传值,使用useState来控制state的状态值 父组件 Father.tsx里: 子组件 Child.tsx里: 展示效果: 子传父 跟react的方式一样,像子组件传入回调函数,通过接收子组件的返回值,再去更新父组件的state 父组件,Father.tsx里: 子组件,Child.tsx里: 展示效果: 子传父优化版,使用useCallback存放处理事件的函数 父组件,Father.tsx里: 子组件,Child.tsx

  • React传递参数的几种方式

    父子组件之间传递参数 父组件往子组件传值,直接用this.props就可以实现 在父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过this.props就可以获取到父组件传递过去的数据 // 父组件 render() { return ( // 使用自定义属性传递需要传递的方法或者参数 <ShopUi toson={this.state}></ShopUi> ) } //子组件 //通过this.props.toson就可以获取到父组件传递过来的数据 如果还需要往孙

  • 详解React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二.如何通信 组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递 子组件向父组件传

  • React.js前端导出Excel的方式

    目录 前言 实现方式 csv 与 Excel 的区别 react-csv xlsx cdn 方式 在 react 中使用 json 转 excel 结语 前言 前段时间,项目上有个需求需要将数据报表导出为 excel 的需求,这本来是后端的工作,前端只需要一个 a 标签,就可以下载文件,但不巧的是,正好遇到后端请假,而且项目比较着急,那么前端是否可以实现呢? 实现方式 经过一顿搜索后,发现有这么几个 npm 库 react-csv 根据给定的数据生成 CSV 文件,数据可以是二维数组.对象数组或

  • React构建组件的几种方式及区别

    目录 一.组件是什么 二.如何构建 函数式创建 通过 React.createClass 方法创建 继承 React.Component 创建 三.区别 一.组件是什么 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式 在React中,一个类.一个函数都可以视为一个组件 组件所存在的优势: 降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历.时间.范围等组件作具体的实现 调试方便,由于整个系统是通过组件组合起

  • React路由组件三种传参方式分析讲解

    目录 路由组件和组件的区别 Swith内置组件使用 react 路由传参 编程式导航 Redirect重定向 路由组件和组件的区别 路由组件时被Router组件使用的组件,this.props里面有三个参数,分别是history.match.location 可以接收到路由跳转传参,也可以进行编程式导航跳转 普通组件只有父传子的props值 Swith内置组件使用 作用:当匹配一个路由组件时,其他组件不会被使用,可以加入404页面,给用户进行友好提示,提升用户体验 react 路由传参 方式一:

  • React创建组件的三种方式及其区别

    React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下. 无状态函数式组件 创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这种组件

  • 详解react中的state的简写方式

    前言 什么是state 我们都说React是一个状态机,体现是什么地方呢,就是体现在state上,通过与用户的交互,实现不同的状态,然后去渲染UI,这样就让用户的数据和界面保持一致了.state是组件的私有属性. 在React中,更新组件的state,结果就会重新渲染用户界面(不需要操作DOM),一句话就是说,用户的界面会随着状态的改变而改变. PS: state 只能在本组件中去初始化,并且 state 只能被本组件去修改和仿问,不能被外部仿问和修改,所以也可以说,state 是组件私有的.

随机推荐