React里面useMemo和useCallBack的区别

useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调,第二个参数为要依赖的数据。

相同部分:都是依赖数据发生变化,才会去更新缓存数据

不同部分:

useMemo缓存的是二次计算的数据,主要用于缓存计算结果的值,跟vue里面的computed大致相同的作用,这样避免组件重新渲染的时候,再重新执行整个函数,导致之前的二次计算也会重新执行一次

示例:

import { useMemo, useState } from 'react'export default function () {const [num, setNum] = useState(0)const [val, setVal] = useState("");const countNum = useMemo(function getCount() {console.log("getCount函数调用了")return num+ 100;},[num])return(<div><h1>总数:{ countNum }</h1><button onClick={() => setNum(num+ 1)}>+1</button><input value={val} type="text" onChange={e=>setVal(e.target.value)} /></div>)
}

useCallBack计算结果是函数, 主要用于缓存函数,应用场景如: 需要缓存的函数,因为函数式组件每次任何一个 useState 的变化,整个组件都会被重新刷新,一些函数是没有必要被重新刷新的,此时就应该缓存起来,提高性能,和减少资源浪费。

示例看我之前的这篇文章:react组件渲染性能优化之函数组件-useCallback使用-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/839744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

加密与解密(第四版)】第二十四章笔记

第二十四章 .NET平台加密解密 暂时不看 https://learn.microsoft.com/zh-cn/dotnet/core/introduction https://www.cnblogs.com/1996V/p/9037603.html https://zhuanlan.zhihu.com/p/134174688

Docker-数据卷的挂载

文章目录 数据卷概念数据卷实现机制数据卷特性数据卷操作数据卷挂载通用命令匿名挂载具名挂载数据卷继承容器数据卷只读容器数据卷读写-默认 总结 数据卷概念 为了很好的实现数据保存和数据共享&#xff0c;Docker提出了Volume这个概念&#xff0c;简单的说就是绕过默认的联合文…

Java(十)---抽象类和接口

文章目录 前言知识回顾1.抽象类1.1.抽象类语法1.2 抽象类特性 2.接口2.1.接口的概念2.2 语法规则2.3 接口使用2.4 接口特性2.5 实现多个接口 3.Object类3.1 获取对象信息3.2.对象比较equals方法 4.接口使用实例4.1.Comparable4.2.Comparator4.3.Cloneable深拷贝和浅拷贝 前言 …

Flutter 中的 Scaffold 小部件:全面指南

Flutter 中的 Scaffold 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;Scaffold 是一个非常重要的 widget&#xff0c;它为 Material Design 中的布局提供了一个基础的结构。Scaffold 通常作为应用的主要布局容器&#xff0c;提供了管理应用栏&#xff08;AppBar&…

新定义RD8T36P48点亮LED--汇编

其实汇编和C语言差不多&#xff0c;简单的东西用汇编挺好&#xff0c;中等及以上复杂度的程序还是C语言更灵活 直接在keil新建好工程&#xff0c;选好芯片型号和下载方式&#xff0c;再创建一个.asm文件并添加到工程&#xff0c; 工程创建完如图 工程配置 代码 ORG 0000HL…

两数交换,数组查找奇数个数的数(位运算)

文章目录 一、异或运算&#xff1a;1.1 Demo1.2 面试题 一、异或运算&#xff1a; 1.1 Demo 0和N进行异或运算都等于N 任何一个数和自己异或运算都等于0 且异或运算满足交换率 a^b b^a eg&#xff1a; a 甲 &#xff0c; b 已 那么则有 a a^b ​ b a^b ​ a a^b 故有&am…

如何理解数字孪生?数字孪生三维可视化有什么关系?

随着科技的飞速发展和数字化转型的浪潮&#xff0c;数字孪生技术逐渐崭露头角&#xff0c;并在多个领域展现出巨大的潜力。而在这股技术革新的潮流中&#xff0c;数字孪生三维可视化以其直观、精确和动态的特点&#xff0c;成为了推动数字化转型的重要部分。 一、数字孪生的魅…

正则项学习笔记

目录 1. L2 正则化 岭回归 1.1 L2 norm计算例子 2. L1 正则化 3. 弹性网正则化 4. Dropout 1. L2 正则化 岭回归 在 PyTorch 中&#xff0c;L2 正则化通常通过设置优化器的 weight_decay 参数实现。以下是一个简单的例子&#xff1a; 介绍博文&#xff1a; 正则化(1)&a…

Java数据结构与算法(翻转二叉树)

前言 翻转二叉树的规则: 1.将二叉树所有节点以根节点为中心进行左右交换。 实现原理 递归实现:采用后续遍历的方式交换节点。同样也可以采用前序递归的方式&#xff0c;必须按分层替换。所以不可以用中序递归方式。 1.递归退出条件:节点的值为空&#xff0c;返回null。 2…

八国多语言微盘微交易所系统源码 单控点控 K线完好

安装环境linux NGMySQL5.6PHP7.2&#xff08;函数全删&#xff09;pm2管理器&#xff08;node版本选择v12.20.0&#xff09; config/ database.php 修改数据库链接 设置运行目录 public 伪静态thinkphp

C语言----深入理解指针(1)

1.内存地址 内存单元的编号 地址 指针 cpu访问内存中的某个字节空间&#xff0c;必须知道这个字节空间在内存的什么位置&#xff0c;而因为内存中字节很多&#xff0c;所以需要给内存进行编址 /int main() //{ // int a 20;//创建变量的本质其实是在内存中申请空间 //…

css左右滚动互不影响

想实现左右都可以滚动&#xff0c;且互不影响。 只需要再左边的css里面 .threedlist {cursor: pointer;width: 280px;position: fixed;height: 100vh; /* 定义父容器高度 */overflow-y: auto; /* 只有在内容超过父容器高度时才出现滚动条 */} 如果想取消滚动条样式 .threedli…

PHP深度探索:从基础到实战,打造高效Web应用

PHP深度探索&#xff1a;从基础到实战&#xff0c;打造高效Web应用 PHP基础概念与环境搭建PHP简介环境搭建 PHP基础语法输出与变量控制结构条件判断循环 函数与数组 实战案例&#xff1a;简易博客系统数据库连接文章发布功能表单提交提交处理 安全性与性能优化安全实践性能优化…

【设计模式深度剖析】【4】【创建型】【建造者模式】| 类比选购汽车的过程,加深理解

&#x1f448;️上一篇:抽象工厂模式 | 下一篇:原型模式&#x1f449;️ 目录 建造者模式概览定义英文原话直译如何理解呢&#xff1f;建造者模式将对象的建造过程给抽象出来了类比选购汽车 4个角色UML类图1. 抽象建造者&#xff08;Builder&#xff09;角色2. 具体建造者…

【Docker实操】启动redis服务

一、步骤 1、获取redis镜像 执行获取redis镜像命令&#xff1a;docker pull redis。打印镜像清单&#xff0c;可以看到新拉到的redis镜像。 2、创建redis.conf配置文件 linux主机 mkdir -p /root/www/redis/conf touch /root/www/redis/conf/redis.conf cat << EOF &…

三维焊接平台在新一代机器人生产中得到广泛应用-河北北重

随着智能制造行业的不断推进&#xff0c;三维焊接平台在工业机器人领域应用现象普遍。三维焊接平台、三维柔性焊接平台工装夹具也会在新一代机器人——智能机器人在工业生产中得到广泛应用。目前&#xff0c;三维焊接平台、焊接铸铁平台在工业机器人的主要作用是应用于弧焊、电…

内网穿透--Ngrok-入门-上线

免责声明:本文仅做技术交流与学习... 目录 Ngrok: 技术实现: 前提: 命令: 详细流程及图解: 平台Ngrok: Sunny-Ngrok内网转发内网穿透 - 国内内网映射服务器 支持的协议&#xff1a;tcp、http、https 支持的类型&#xff1a;正向代理、反向代理 --隧道开通免费的 --协议…

Flink集群搭建简介

一、下载与解压 前往Flink官方网站&#xff08;https://flink.apache.org/zh/downloads.html&#xff09;下载适合你环境的Flink版本。注意&#xff0c;你需要选择与你的Scala版本相匹配的Flink版本。将下载的安装包&#xff08;通常是.tgz格式&#xff09;传输到你的主节点&a…

第三代“图即代码”低代码平台设计

低代码平台现在市面上的产品大致分为两类&#xff0c;一种是“ 搭积木”类型的 这种类型的主要是一些行业定制的saas产品&#xff0c;是在已经成型或者是平台提供的垄断性资源上来做二次“搭建”这种平台优势在于能快速上手&#xff0c;有难度的都进行了“简化”和“特定场景”…

经纬恒润第三代重载自动驾驶平板车

随着无人驾驶在封闭场地和干线道路场景的加速落地&#xff0c;港口作为无人化运营的先行者&#xff0c;其场景的复杂度、特殊性对无人化运营的技术提出了各种挑战。经纬恒润作为无人驾驶解决方案提供商&#xff0c;见证了港口在无人化运营方面的尝试及发展&#xff0c;并深度参…