memo、useMemo和useCallback的区别

2023-11-04

memo用来优化函数组件的重复渲染行为,当传入属性值都不变的情况下不会触发组件的重新渲染,否则就会触发组件的重新渲染;和类组件的PureComponent的功能是类似的;在hooks环境下,几乎所有组件都是函数式组件,我们使用memo的几率要比PureComponent高得多;

memo针对的是一个组件的渲染是否重复执行

而useMemo则定义了一段函数逻辑是否重复执行
本质都是用同样的算法来判定依赖是否发生改变,继而决定是否触发特定逻辑;(有很多这样的逻辑:输入和输出是对等的,相同的输入一定产生相同的输出,数学上称之为幂等)利用memo就可以避免不必要的重复计算,减少资源浪费。

所以严格来讲,不使用memo和useMemo不应该会导致你的业务逻辑发生变化(memo和useMemo只是用来做性能优化)​

useMemo和useEffect的语法是一样的,第一个参数是要执行的逻辑函数,第二个参数是这个逻辑函数依赖的变量组成的数组,如果不传第二个参数,则useMemo的逻辑函数每次都执行,那useMemo的意义就不存在了。如果传入空数组,则只执行一次;

useMemo和useEffect的执行时机是不一致的:useEffect执行的是副作用,所以一定是在渲染之后执行的,useMemo是需要有返回值的,而返回值可以直接参与渲染的,所以useMemo是在渲染期间完成的,有这样一个一前一后的区别

userMemo和useCallback接受的参数都是一样的,第一个参数为回调函数,第二个参数是要依赖的数据;

共同点:只有在依赖数据发生变化后,才会重新计算结果,起到缓存的作用

区别:useMemo返回的是计算的结果值,用于缓存计算后的状态
useCallback返回的是函数,主要用来缓存函数,因为函数式组件中的state的变化都会导致整个组件被重新刷新(即使一些函数没有必要被刷新),此时用useCallback就会将函数进行缓存,减少渲染时的性能损耗​;

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

memo、useMemo和useCallback的区别 的相关文章

  • React + Umi + Dva + Antd 简述 及创建项目过程简述

    React 你的第一个组件 React React是前端三大主流框架之一 你可以在React里传递多种类型的参数 如声明代码 帮助你渲染出UI 也可以是静态的HTML DOM元素 也可以传递动态变量 甚至是可交互的应用组件 安装react框
  • 对Fiber架构的理解?解决了什么问题?

    一 问题 JavaScript引擎和页面渲染引擎两个线程是互斥的 当其中一个线程执行时 另一个线程只能挂起等待 如果 JavaScript 线程长时间地占用了主线程 那么渲染层面的更新就不得不长时间地等待 界面长时间不更新 会导致页面响应度
  • React Native 环境搭建, 新建项目, 运行和调试

    React Native 可以理解为一个基于 JavaScript 具备动态配置能力 面向前端开发者的移动端开发框架 目前为止虽然一直还没有V1 0 0版本 但是相信很多小伙伴都了解过或者已经入坑了 为什么RN那么有人气呢 我们可以先简单分
  • React重新渲染的触发机制及其优化策略

    React是一个用于构建用户界面的JavaScript库 它的核心特点之一是使用虚拟DOM Virtual DOM 来实现高效的组件渲染 那组件重新渲染的机制是如何呢 基于这些机制 如果进行优化呢 虚拟DOM是一个用JavaScript对象
  • React 组件通讯

    目录 1 组件通讯 概念 1 组件的特点 2 知道组件通讯意义 总结 2 组件通讯 props 基本使用 1 传递数据和接收数据的过程 2 函数组件使用 props 3 类组件使用 props 总结 3 组件通讯 props 注意事项 1
  • react基础--组件通讯:props基础、子传父、父传子、兄弟组件通讯、context跨级组件、props进阶

    目录 一 props基础 1 1 概述 1 2 函数组件通讯 1 2 1 基本用法 1 2 1 对象数据传递 1 3 类组件通讯 1 4 props的特点 二 组件通讯三种方式 2 1 父传子 2 2 子传父 2 3 兄弟组件通讯 三 co
  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod
  • Ant Design Pro 从零到一教程

    说在最前面的话 可是能全网唯一适合小白的antd教程 因为我找了接近一个周的教程 无论是视频 博客等等都没有比较完整的教程 所以才说这可能是唯一全网适合小白教程 文章末有相关学习链接 适用人群 喜欢看文字或者代码学习的人 学习的人掌握基本的
  • 一文揭秘饿了么跨端技术的演进、实践与落地

    本文会先带领大家一起简单回顾下跨端技术背景与演进历程与在这一波儿接着一波儿的跨端浪潮中的饿了么跨端现状 以及在这个背景下 相较于业界基于 React Vue 研发习惯出发的各种跨端方案 饿了么为什么会选择走另外一条路 这个过程中我们的一些思
  • react和react jsx基础

    本文是个人学习笔记 例子都是来自React Native官网 之前不是做前端的 没有使用过react 要学习react native做混合开发 react 包括react jsx还是得补补 react和react jsx react是一个j
  • React解密:React Hooks函数之useCallback和useMemo

    之所以将useCallback和useMemo放到一起 从某种意义上说 他们都是性能优化的始作俑者 他们也有很多的共性 我们先来回顾一下class组件性能优化的点 调用 setState 就会触发组件的重新渲染 无论前后 state 是否相
  • useEffect详情用法

    1 为什么要使用useEffect 想必大家都是用过vue吧 在vue框架所写的项目中 我们通过在与后端进行数据交互的过程中 通常都是会在生命周期中进行数据的请求 然后将数据返回给页面进行渲染 在React中我们也是这样 但是在函数式组件中
  • React核心概念:状态提升

    上一节 表单 下一节 组合vs继承 React核心概念 状态提升 引言 添加第二个输入框 编写转换函数 状态提升 经验总结 引言 很多情况下我们使用的多个组件需要对同一个数据做出对应的反应 在这里我们推荐把这个共享的状态提升到距离这些组件最
  • umi 后台管理demo

    umi 后台管理demo umi react ts dva antd egg 有待优化 简单的前后端管理demo 接口提供增删查改 前端也有相应功能 github代码 https github com huiBuiling ql admin
  • react 父组件调用子组件的方法

    子组件中 const child forwardRef props ref gt useImperativeHandle ref gt 这里面的方法是暴露给父组件的 test console log 我是组件里的test方法 test2 t
  • 如何替换对象的key值

    发生的场景 现在用antd组件库 有些组件想渲染数据的话 我要根据他们官网给的字段名称对应起来才能渲染上去 这个是复选框选中 保存的时候 字段需要按照后台约定的传入code value 1 常规循环遍历 大招来了 哈哈哈 才疏学浅 我觉得是
  • React事件处理及事件流

    React事件处理 React事件处理是通过将事件处理器绑定到组建上处理事件 事件触发的同时更新组建的内部状态 内部状态更新会触发组件的重绘 React 元素的事件处理和 DOM 元素的事件处理很相似 但语法上的略有区别 在React中事件
  • error Missing “key“ prop for element in array react/jsx-key

    react遇到一个奇怪的问题 error Missing key prop for element in array react jsx key 检查了jsx中使用map的 都定义了key div otherList map item an
  • React配置@src根路径

    第一种 直接修改node modules包中的webpack config js文件 找到node modules react scripts config webpack config js文件 修改其中alias中的配置 添加 src
  • 如何提高React组件的渲染效率的?在React中如何避免不必要的render?

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染

随机推荐

  • 为什么kafka 需要 subscribe 的 group.id?我们是否需要使用 commitSync 手动提交偏移量?

    目录 一 为什么需要带有 subscribe 的 group id 二 我们需要使用commitSync手动提交偏移量吗 三 如果我想手动提交偏移量 该怎么做 一 为什么需要带有 subscribe 的 group id 消费概念 Kafk
  • 获取当前系统的时间

    1 time函数 函数原型 time t time time t t 函数功能 获取当前系统的时间 函数的返回值和参数都是time t类型的变量 且都可以获取当前系统的时间 使用前先定义一个time t类型的变量 例 time t t ti
  • 优秀logo设计解析_产品设计中十种常见LOGO工艺处理手法解析

    在制造业当中 一个产品中logo的如何应用 更能够体现这个品牌的形象 所谓细节决定成败 logo的处理更是产品设计细节中的细节 而产品设计师在完成产品设计时会考虑到logo的位置 样式以及工艺处理 作为一个优秀设计师那肯定需要了解LOGO的
  • Java中Lock锁的基本使用

    1 创建锁 2 加锁 3 解锁 package com liu demo01 import java util concurrent locks Lock import java util concurrent locks Reentran
  • Qt开发 之 抓取崩溃信息(读这一篇就够了)

    文章目录 1 简介 1 1 常见崩溃 1 2 BreakPad 1 2 1 源码 1 2 2 原理 1 3 用BreakPad处理崩溃具体流程 2 Qt中加入BreakPad 2 1 在项目中引入BreakPad模块 2 2 google
  • 入门级题解:2000. 反转单词前缀

    题目 给你一个下标从 0 开始的字符串 word 和一个字符 ch 找出 ch 第一次出现的下标 i 反转 word 中从下标 0 开始 直到下标 i 结束 含下标 i 的那段字符 如果 word 中不存在字符 ch 则无需进行任何操作 思
  • 软件测试职业生涯需要编写的全套文档模板,收藏这一篇就够了 ~

    作为一名测试工程师 在整个的职业生涯中 会涉及到各种不同类型的文档编写 大体包括如下 对应文档模板及文档编写视频如下 一 测试岗位必备的文档 在一个常规的软件测试流程中 会涉及到测试计划 测试方案 测试用例 测试报告的编写 这些文档也是软件
  • el-select绑定值赋值后,页面无法显示对应label值

    el select绑定值赋值后 页面无法显示对应label值 this lunwen achmId 1 页面也显示1 无法显示1对应的label值 这种情况大多数是数据类型不统一 比如页面绑定为number类型 而赋值为string类型 或
  • 多模态深度学习综述总结 与 目标检测多模态融合领域论文推荐

    文章目录 一 多模态学习定义及应用 二 模态表示 2 1 单模态表示 2 1 1 语句模态表示 2 1 2 视觉模态表示 2 1 3 声音模态表示 略 2 2 多模态表示 2 2 1 模态共作用语义表示 联合表示 2 2 2 模态约束语义表
  • 无公网IP,在外公网远程访问RabbitMQ服务「内网穿透」

    文章目录 前言 1 安装erlang 语言 2 安装rabbitMQ 3 内网穿透 3 1 安装cpolar内网穿透 支持一键自动安装脚本 3 2 创建HTTP隧道 4 公网远程连接 5 固定公网TCP地址 5 1 保留一个固定的公网TCP
  • Leedcode编程题283:移动零----C++实现

    目的 旨在记录在Leedcode网上刷题的过程 记录心得 题目 给定一个数组 nums 编写一个函数将所有 0 移动到数组的末尾 同时保持非零元素的相对顺序 示例 输入 0 1 0 3 12 输出 1 3 12 0 0 说明 必须在原数组上
  • SpringBoot连接超时导致的502错误案例

    1 问题描述 内部系统之间通过Nginx来实现路由转发 但最近发现有一个系统 经常报502错误 每天达到上百次 完全无法忍受 2 原因排查 于是进行排查 发现配置人员把连接超时时间 server tomcat connection time
  • 006 从不同的角度理解数组名的意义——“C”

    一 数组名的意义是什么 引入 1 数组名的意义 sizeof 数组名 这里的数组名表示整个数组 计算的是整个数组的大小 数组名 这里的数组名表示整个数组 取出的是整个数组的地址 除此之外所有的数组名都表示首元素的地址 2 strlen函数基
  • js 修改服务器控件,js设置服务器控件的值

    js设置服务器控件的值 内容精选 换一换 规划数据服务器与集群处于同一内网 数据服务器IP为192 168 0 90和192 168 0 91 数据源文件格式为CSV 创建导入的目标表tpcds reasons CREATE TABLE t
  • 驱动开发概念详解

    1 什么是驱动 能够驱使硬件实现特定功能的软件代码 可以根据驱动程序是否依赖于系统内核将其分为裸机驱动和系统驱动 1 1裸机驱动 编写的驱动代码中没有进行任何内核相关的API调用 开发者查询资料配置寄存器完成硬件相关控制 不依赖于系统内核
  • 企业治理实战-经验分享

    该文章已同步到语雀公开知识库 大数据技术架构手册 1 中 公众号后台回复 小程序注册码 可免费查看面试题小程序 前言 作为一名数据人 常常自嘲为SQL Boy 某天突然发现原来SQL boy还有一些更高级的工作内容 数据治理 这两年也有很多
  • 第41篇-小某书timestamp2参数分析【2022-08-15】

    提前声明 该专栏涉及的所有案例均为学习使用 如有侵权 请联系本人删帖 文章目录 一 前言 二 加密分析 三 改版 一 前言 今天我们来分析一下timestamp2参数 aHR0cHM6Ly93d3cueGlhb2hvbmdzaHUuY29t
  • 图的深度遍历(DFS)和广度遍历(BFS)详解

    目录 1 前奏 邻接表 2 深度遍历 3 广度遍历 1 前奏 邻接表 图作为种比较繁琐的数据结构 在进行图的操作之前 首先应该用合适的数据类型来存储图的信息 我们使用邻接表来存储 它是一种链式的存储结构 所谓邻接表就是对途中的每个顶点建立一
  • 从0搭建go+walk界面应用开发程序(windows)

    从0搭建go walk界面应用开发程序 第一步 安装GO SDK 1 1 下载sdk 从官网下载SDK 进入https golang google cn dl 点击 download 或者直接使用浏览器或迅雷下载笔者自己上传的SDK htt
  • memo、useMemo和useCallback的区别

    memo用来优化函数组件的重复渲染行为 当传入属性值都不变的情况下不会触发组件的重新渲染 否则就会触发组件的重新渲染 和类组件的PureComponent的功能是类似的 在hooks环境下 几乎所有组件都是函数式组件 我们使用memo的几率