【React】Memo

组件重新渲染时缓存计算的结果。

实例:count1计算斐波那契数列,count2和count1可以触发数值变化。使用memo可以使只有在count1变化时触发斐波那契数列计算函数,而count2变化时不触发斐波那契数列计算函数。


import { useMemo } from "react";
import { useState } from "react";

function fib(n) {
  console.log('计算函数执行')
  if (n < 3) {
    return 1
  }
  return fib(n - 1) + fib(n - 2)
}

function App() {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)
  console.log('组件重新渲染')
  const result = useMemo(() => {
    return fib(count1)
  }, [count1])
  return (
    <div className="App">
      <button onClick={() => { setCount1(count1 + 1) }}>change count1: {count1}</button>
      <button onClick={() => { setCount2(count2 + 1) }}>change count2: {count2}</button>
      result: {result}
    </div>
  )
}

export default App

image.png

image.png

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

二十六、搜索结果处理(排序、分页、高亮)

目录 一、排序 二、分页 1、深度分页问题 2、三种方案的优缺点 &#xff08;1&#xff09;fromsize 优点&#xff1a; 缺点&#xff1a; 场景&#xff1a; &#xff08;2&#xff09;after search 优点&#xff1a; 缺点&#xff1a; 场景&#xff1a; &#xff0…

git的使用:本地git下载、sshkey的添加、github仓库创建及文件上传

一、github创建账号 即github注册账号&#xff0c;登录github官网&#xff0c;根据提示注册即可 github官网 二、git客户端下载安装 已有很多git下载安装的博文了&#xff0c;在此就不赘述 三、sshkey的生成与添加 1、sshkey的生成以及查看 // sshkey的生成命令&#xff…

【代码】考虑电解槽变载启停特性与阶梯式碳交易机制的综合能源系统优化调度matlab-yalmip-cplex/gurob

程序名称&#xff1a;考虑电解槽变载启停特性与阶梯式碳交易机制的综合能源系统优化调度 实现平台&#xff1a;matlab-yalmip-cplex/gurobi 代码简介&#xff1a;提出了一种考虑 变载启停特性的电解槽混合整数线性模型&#xff0c;根据电 氢负荷可以实时调整设备工作状态&…

Leetcode211. 添加与搜索单词 - 数据结构设计

Every day a Leetcode 题目来源&#xff1a;211. 添加与搜索单词 - 数据结构设计 解法1&#xff1a;字典树 字典树&#xff08;前缀树&#xff09;是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。前缀树可以用 O(∣S∣) 的时间复杂度完成如下操作…

Linux进程通信——信号量

概念 信号量(semaphore) 与已经介绍过的 PC 结构不同&#xff0c;它是一个计数器。信号量用于实现进程间的互斥与同步&#xff0c;而不是用于存储进程间通信数据。 特点 1.信号量用于进程间同步&#xff0c;若要在进程间传递数据需要结合共享内存 2.信号量基于操作系统的 PV…

VUE简易计划清单

目录 效果预览图 完整代码 效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

嵌入式的学习需要合理规划时间

低级的欲望放纵即可获得&#xff0c;高级的欲望只有克制才能达成。——卡耐基1、粉丝的误会 很多粉丝&#xff0c;问我&#xff0c; "胡老师我想报您的培训班。" ... 得知我知识业余时间写文章&#xff0c;紧接着又会问&#xff0c; "jg单位这么清闲啊&#…

粉丝提问:写博文怎样才能变现啊?

文章目录 粉丝提问&#xff1a;写博文怎样才能变现啊&#xff1f;我总结了一下博客变现的几个途径&#xff1a;另外做技术博主的五大好处 后记 粉丝提问&#xff1a;写博文怎样才能变现啊&#xff1f; type: Post status: Published date: 2023/11/26 tags: 推荐 category…

单调栈类型题

搞定八道高频算法题 一、如何找右边第一个比我小的元素 二、如何找右边第一个比我大的元素 三、如何找右边最后一个比我小的元素 四、如何找右边最后一个比我大的元素 五、如何找左边第一个比我小的元素 六、如何找左边第一个比我大的元素 七、如何找左边最后一个比我小的元素 …

Nginx常见的中间件漏洞

目录 1、Nginx文件名逻辑漏洞 2、Nginx解析漏洞 3、Nginx越权读取缓存漏洞 这里需要的漏洞环境可以看&#xff1a;Nginx 配置错误导致的漏洞-CSDN博客 1、Nginx文件名逻辑漏洞 该漏洞利用条件有两个&#xff1a; Nginx 0.8.41 ~ 1.4.3 / 1.5.0 ~ 1.5.7 php-fpm.conf中的s…

泛型你掌握多少?包装类你深入了解过吗?快进来看看吧~

目录 1、泛型是什么——引出泛型 2、泛型的使用 2.1、语法 2.2泛型类的使用 2.3、裸类型 3、泛型如何编译 3.1、擦除机制 3.2、为什么不能实例化泛型类型数组 4、泛型的上界 5、泛型方法 5.1、语法 5.2、举例 6、通配符 6.1、什么是通配符 6.2、统配符解决了什么…

【数据中台】开源项目(2)-Dbus系统架构

大体来说&#xff0c;Dbus支持两类数据源&#xff1a; RDBMS数据源 日志类数据源 1 RMDBMS类数据源的实现 以mysql为例子. 分为三个部分&#xff1a; 日志抽取模块(最新版DBus已经废弃该模块&#xff0c;使用canal直接输出到kafka) 增量转换模块 全量拉取模块 1.1 日志抽…

单片机学习4——中断的概念

中断的概念&#xff1a; CPU在处理A事件的时候&#xff0c;发生了B事件&#xff0c;请求CPU迅速去处理。&#xff08;中断产生&#xff09; CPU暂时中断当前的工作&#xff0c;转去处理B事件。&#xff08;中断响应和中断服务&#xff09; 待CPU将B事件处理完毕后&#xff0…

深入理解JVM虚拟机第二十六篇:详解JVM当中的虚方法和非虚方法,并从字节码指令的角度去分析虚方法和非虚方法

😉😉 学习交流群: ✅✅1:这是孙哥suns和树哥给大家的福利! ✨✨2:我们免费分享Netty、Dubbo、k8s、Spring...应用和源码级别的视频资料 🥭🥭3:QQ群:583783824 📚​​​​​​​📚 微信:DashuDeveloper拉你进微信群,免费领取! 一:非虚方法和虚方法 方法…

【JAVA杂货铺】一文带你走进面向对象编程|继承|重载|重写|期末复习系列 | (中4)

&#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏:Java学习系列专栏&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 继承 私有成员变量在继承中的使用​编辑 当子类和父类变量不重名时: 当子类和父类重名时: &#x1f4dd;总结: 继承的含义: …

网络视频播放卡顿原因分析

一、问题描述 某项目通过拉摄像机rtsp流转rtmp/http-flv/ws-flv的方案&#xff0c;使用户可以在网页中观看摄像机的视频画面。在 观看视频时偶发出现卡顿现象。 二、卡顿现象分析和解决 此问题涉及的原因较多&#xff0c;所以得考虑各环节的问题可能性&#xff0c;并根据现场实…

Vue常见的实现tab切换的两种方法

目录 方法一&#xff1a;事件绑定属性绑定 效果图 完整代码 方法二&#xff1a;属性绑定 动态组件 component标签 效果图 完整代码 方法一&#xff1a;事件绑定属性绑定 效果图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta c…

5.前端--CSS-基本概念【2023.11.26】

1. CSS 语法规范 CSS 规则由两个主要的部分构成&#xff1a;选择器以及一条或多条声明。 属性和属性值之间用英文“:”分开 多个“键值对”之间用英文“;”进行区分 选择器 : 简单来说&#xff0c;就是选择标签用的。 声明 &#xff1a;就是改变样式 2.CSS引入方式 按照 CSS 样…

有了倾斜摄影,如何搭建一座智慧城市?

随着无人机航测、倾斜摄影等全新一代测绘信息技术方法的发展&#xff0c;可以迅速搜集制作精细化的城市三维模型&#xff0c;搭建城市地理信息基础服务架构。 近期都在重点关注的“智慧城市”究竟是什么&#xff0c;有什么重大作用&#xff0c;同时又面临着什么难关&#xff0c…

物联网AI 无线连接学习之蓝牙基础篇 协议的发展

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 蓝牙由来 “蓝牙”&#xff08;Bluetooth&#xff09;原是一位在10世纪统一丹麦的国王哈拉尔 (HaralBluetooth)&#xff0c;他将当时的瑞典、芬兰与丹麦统一起来。而将“蓝牙”与后来的无线通讯技术标准关联…