【React】Memo

news2024/11/16 12:39:47

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

实例: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

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

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

相关文章

【Ambari】HDFS基于Ambari的常规运维

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f…

Vue3的计算属性(computed)和监听器(watch)案例语法

一&#xff1a;前言 Vue3 是 Vue2 的一个升级版&#xff0c;随着 2023年12月31日起 Vue2 停止维护。这意味着 Vue3 将会为未来国内一段时间里&#xff0c;前端的开发主流。因此熟练的掌握好 Vue3 是前端开发程序员所不可避免的一门技术栈。而 Vue3 是 Vue2 的一个升级版&#x…

画中画视频剪辑:如何实现多画面融合,提升创作质量

在视频剪辑的过程中&#xff0c;画中画是一种常见的技巧&#xff0c;它能够将多个画面融合在一起&#xff0c;创造出一种独特的效果&#xff0c;增强视频的观赏性和表现力。这种技巧常常用于电影、电视和广告中&#xff0c;以增加视觉冲击力&#xff0c;引导注意力&#xff0c;…

Vue3设计思想及响应式源码剖析 | 京东物流技术团队

一、Vue3结构分析 1、Vue2与Vue3的对比 对TypeScript支持不友好&#xff08;所有属性都放在了this对象上&#xff0c;难以推倒组件的数据类型&#xff09;大量的API挂载在Vue对象的原型上&#xff0c;难以实现TreeShaking。架构层面对跨平台dom渲染开发支持不友好,vue3允许自…

阅读笔记——《Removing RLHF Protections in GPT-4 via Fine-Tuning》

【参考文献】Zhan Q, Fang R, Bindu R, et al. Removing RLHF Protections in GPT-4 via Fine-Tuning[J]. arXiv preprint arXiv:2311.05553, 2023.【注】本文仅为作者个人学习笔记&#xff0c;如有冒犯&#xff0c;请联系作者删除。 目录 摘要 一、介绍 二、背景 三、方法…

十大排序之冒泡排序与快速排序(详解)

文章目录 &#x1f412;个人主页&#x1f3c5;算法思维框架&#x1f4d6;前言&#xff1a; &#x1f380;冒泡排序 时间复杂度O(n^2)&#x1f387;1. 算法步骤思想&#x1f387;2.动画实现&#x1f387; 3.代码实现&#x1f387;4.代码优化&#xff08;添加标志量&#xff09; …

高级搜索-线段树[C/C++]

线段树 文章目录 线段树前言一、线段树的定义二、线段树的结构与建立2..1 节点定义2.2 递归建树2.3 静态数组空间的解释 三、线段树的操作3.1 单点修改3.2 单点查询3.3 区间查询3.3 区间修改 四、动态开点线段树递增分配器 前言 对于求数组区间和我们可以处理出前缀和后可以在…

京东数据采集接口推荐(京东大数据分析工具)

随着京东电商平台的不断发展&#xff0c;平台中店铺数量也越来越多&#xff0c;对于电商卖家而言&#xff0c;在电商运营过程中如何做好数据分析也越来越重要。而电商运营数据往往多而杂&#xff0c;想要高效的完成电商数据分析&#xff0c;品牌需要借助一些电商数据分析软件。…

Leetcode—1457.二叉树中的伪回文路径【中等】

2023每日刷题&#xff08;四十&#xff09; Leetcode—1457.二叉树中的伪回文路径 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ int record[10] {0};int accumula…

Qt C++中调用python,并将软件打包发布,python含第三方依赖

工作中遇到qt c调用我的python 代码&#xff0c;并且想要一键打包&#xff0c;这里我根据参考的以及个人实践的结果来简单实现一下。 环境&#xff1a;windows系统&#xff0c;QT Creater 4.5&#xff0c; python 3.8&#xff08;anaconda虚拟环境&#xff09; 1. 简单QT调用…

pgz easyexcel如何给excel文件添加自定义属性

免费API方式 直接上传URL,自定义修改Excel 视频演示【内含接口地址】 https://www.ixigua.com/7304510132812153385 前情提示 | 功能说明 多选仅支持微软office、office365系列Excel。因为WPS宏功能需要企业版且付费生成xlsx、xlsm等文件,office和WPS均可以打开,均可以单…

红队攻防实战系列一之Cobalt Strike

他日若遂凌云志&#xff0c;敢笑黄巢不丈夫 本文首发于先知社区&#xff0c;原创作者即是本人 前言 在红队攻防中&#xff0c;需要我们拥有综合能力&#xff0c;不仅仅是web渗透的漏洞挖掘与利用&#xff0c;边界突破的方式有很多种&#xff0c;当然这需要我们拥有很强的意识…

(4)BUUCTF-web-[极客大挑战 2019]EasySQL1

前言&#xff1a; 觉得这个题目挺有意义的&#xff0c;因为最近在学数据库&#xff0c;但是不知道在现实中有什么应用&#xff0c;所以学起来也没有什么兴趣&#xff0c;做了这个题目&#xff0c;发现数据库还是挺有用处的&#xff0c;哈哈 知识点&#xff1a; mysql 中and和…

incast,拥塞控制,内存墙的秘密

数据中心 incast&#xff0c;广域网拥塞&#xff0c;内存墙都是一类问题。 我接触 incast 很久了&#xff0c;大多是帮忙查问题&#xff0c;也解过几例。 我记得有一次在业务几乎总是(在统计学上&#xff0c;几乎和总是属同义强调) tail latency 很大时&#xff0c;我建议在 …

【Python3】【力扣题】349. 两个数组的交集

【力扣题】题目描述&#xff1a; 【Python3】代码&#xff1a; 1、解题思路&#xff1a;集合的交集。两个数组都转为集合&#xff0c;获取集合的交集。 知识点&#xff1a;set(...)&#xff1a;转为集合&#xff0c;集合的元素不重复。 集合1.intersection(集合2)&#xff1a…

将 Hexo 部署到阿里云轻量服务器(保姆级教程)

将 Hexo 部署到阿里云轻量服务器(保姆级教程) 顺哥轻创 1 前言 作为有梦想的,有追求的程序员,有一个自己的个人博客简直就是必须品。你可以选择 wordpress 这种平台,直接使用,在任何地方只要有网络就能写博客。还可以选择 hexo 这种静态博客,但是发文章就没有那么随心…

基于opencv+ImageAI+tensorflow的智能动漫人物识别系统——深度学习算法应用(含python、JS、模型源码)+数据集(三)

目录 前言总体设计系统整体结构图系统流程图 运行环境爬虫模型训练实际应用 模块实现1. 数据准备1&#xff09;爬虫下载原始图片2&#xff09;手动筛选图片 2. 数据处理1&#xff09;切割得到人物脸部2&#xff09;重新命名处理后的图片3&#xff09;添加到数据集 3. 模型训练及…

webpack 打包优化

在vue.config.js中配置 下载 uglifyjs-webpack-plugin 包 const { defineConfig } require("vue/cli-service"); var path require("path");module.exports defineConfig({transpileDependencies: true,filenameHashing: false, // 去除Vue打包后.cs…

SSM手机资讯网站系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 手机资讯网站系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模…

PHP 针对mysql 自动生成数据字典

PHP 针对mysql 自动生成数据字典 确保php 可以正常使用mysqli 扩展 这里还需要注意 数据库密码 如果密码中有特殊字符 如&#xff1a; 首先&#xff0c;我们需要了解MySQL中的特殊字符包括哪些。MySQL中的特殊字符主要包括以下几类&#xff1a; 1. 单引号&#xff08;&a…