当前位置: 首页 > news >正文

React的hooks---useCallback useMemo

useCallback 和 useMemo 结合 React.Memo 方法的使用是常见的性能优化方式,可以避免由于父组件状态变更导致不必要的子组件进行重新渲染

useCallback

useCallback 用于创建返回一个回调函数,该回调函数只会在某个依赖项发生改变时才会更新,可以把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染的子组件,在 props 属性相同情况下,React 将跳过渲染组件的操作并直接复用最近一次渲染的结果

import React, { useState, useCallback } from 'react';function SubmitButton(props) {const { onButtonClick, children } = props;console.log(`${children} updated`);return (<button onClick={onButtonClick}>{children}</button>);
}
// 使用 React.memo 检查 props 变更,复用最近一次渲染结果
SubmitButton = React.memo(submitButton);export default function CallbackForm() {const [count1, setCount1] = useState(0);const [count2, setCount2] = useState(0);const handleAdd1 = () => {setCount1(count1 + 1);}// 调用 useCallback 返回一个 memoized 回调,该回调在依赖项更新时才会更新const handleAdd2 = useCallback(() => {setCount2(count2 + 1);}, [count2]);return (<><div><p>count1: {count1}</p><SubmitButton onButtonClick={handleAdd1}>button1</SubmitButton></div><div><p>count2: {count2}</p><SubmitButton onButtonClick={handleAdd2}>button2</SubmitButton></div></>)
}

useCallback(fn, deps) 相当于 useMemo(() => fn, deps),以上 useCallback 可替换成 useMemo 结果如下:

const handleAdd2 = useMemo(() => {return () => setCount2(count2 + 1);
}, [count2]);

useMemo

把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

使用注意:

  • 传入 useMemo 的函数会在渲染期间执行,不要在这个函数内部执行与渲染无关的操作
  • 如果没有提供依赖项数组,useMemo 在每次渲染时都会计算新的值
import React, { useState, useMemo } from 'react';function counterText({ countInfo }) {console.log(`${countInfo.name} updated`);return (<p>{countInfo.name}: {countInfo.number}</p>);
}
// // 使用 React.memo 检查 props 变更,复用最近一次渲染结果
const CounterText = React.memo(counterText);export default function Counter() {const [count1, setCount1] = useState(0);const [count2, setCount2] = useState(0);const countInfo1 = {name: 'count1',number: count1};// 使用 useMemo 缓存最近一次计算结果,会在依赖项改变时才重新计算const countInfo2 = useMemo(() => ({name: 'count2',number: count2}), [count2]);return (<><div><CounterText countInfo={countInfo1} /><button onClick={() => setCount1(count1 + 1)}>Add count1</button></div><div><CounterText countInfo={countInfo2} /><button onClick={() => setCount2(count2 + 1)}>Add count2</button></div></>);
}

 

相关文章:

React的hooks---useCallback useMemo

useCallback 和 useMemo 结合 React.Memo 方法的使用是常见的性能优化方式&#xff0c;可以避免由于父组件状态变更导致不必要的子组件进行重新渲染 useCallback useCallback 用于创建返回一个回调函数&#xff0c;该回调函数只会在某个依赖项发生改变时才会更新&#xff0c;…...

05. 容器资源管理

目录 1、前言 2、CGroup 2.1、是否开启CGroup 2.2、Linux CGroup限制资源能使用 2.2.1、创建一个demo 2.2.2、CGroup限制CPU使用 2.3、Linux CGroup限制内存使用 2.4、Linux CGroup限制IO 3、Docker对资源的管理 3.1、Docker对CPU的限制 3.1.1、构建一个镜像 3.1.2…...

通过ETL自动化同步飞书数据到本地数仓

一、飞书数据同步到数据库需求 使用飞书的企业都有将飞书的数据自动同步到本地数据库、数仓以及其他业务系统表的需求&#xff0c;主要是为了实现飞书的数据与业务系统进行流程拉通或数据分析时使用&#xff0c;以下是一些具体的同步场景示例&#xff1a; 组织架构同步&#…...

MySQL基础扎实——MySQL中各种数据类型之间的区别

在MySQL中&#xff0c;有各种不同的数据类型可供选择来存储不同类型的数据。下面是一些常见的数据类型以及它们之间的区别&#xff1a; 整数类型&#xff1a; TINYINT&#xff1a;1字节&#xff0c;范围为-128到127或0到255&#xff08;无符号&#xff09;。SMALLINT&#xff1…...

每天五分钟机器学习:多项式非线性回归模型

本文重点 在前面的课程中,我们学习了线性回归模型和非线性回归模型的区别和联系。多项式非线性回归模型是一种用于拟合非线性数据的回归模型。与线性回归模型不同,多项式非线性回归模型可以通过增加多项式的次数来适应更复杂的数据模式。在本文中,我们将介绍多项式非线性回…...

ETH网络学习

概要 ETH网络是一个P2P网络&#xff0c;整个网络又区分为“执行层”与“共识层”。“执行层”节点负责交易交换&#xff0c;“共识层”节点负责区块打包、区块验证、区块同步和链同步。 执行层 执行层分为“服务发现”与“DevP2P”&#xff0c;两者共同并行执行。 服务发现…...

01-将函数参数化进行传递

项目源码&#xff1a;https://github.com/java8/ 1 应对不断变化的需求 在我们进行开发中&#xff0c;经常需要面临需求的不断变更&#xff0c;我们可以将行为参数化以适应不断变更的需求。 行为参数化就是可以帮助我们处理频繁变更的需求的一种软件开发模式 我们可以将代码…...

数据结构【栈和队列】

第三章 栈与队列 一、栈 1.定义&#xff1a;只允许一端进行插入和删除的线性表&#xff0c;结构与手枪的弹夹差不多&#xff0c;可以作为实现递归函数&#xff08;调用和返回都是后进先出&#xff09;调用的一种数据结构&#xff1b; 栈顶&#xff1a;允许插入删除的那端&…...

MATLAB | 产生阿尔法稳定分布噪声并作出概率密度函数

一、问题描述 想产生不同特征参数的α稳定随机变量&#xff0c;并且作出其概率密度函数进行对比。 二、解决思路 运行了MATLAB的官方实例代码&#xff1a; openExample(‘stats/ComparePDFsOfStableDistributionsExample’) &#xff08;1&#xff09;使用makedist()函数生成…...

深入浅出Pytorch函数——torch.softmax/torch.nn.functional.softmax

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 机器学习中的数学——激活函数&#xff1a;Softmax函数 深入浅出Pytorch函数——torch.softmax/torch.nn.functional.softmax 深入浅出Pytorch函数——torch.nn.Softmax 将Softmax函数应用于沿dim的…...

Vue2学习笔记

vue是根据数据来构建用户界面的一套框架 创建一个vue实例 <!-- 1.创建一个容器 2.引入vue.js开发版本&#xff08;全局的&#xff09; 3.创建实例对象 4.配置选项 > 完成渲染 --> <div id"app">{{ msg }} </div> <script srcvue.js><…...

Java 悲观锁 乐观锁

锁可以从不同的角都分类。其中乐观锁和悲观锁是一种分类方式 一、悲观锁、乐观锁定义 悲观锁就是我们常说到的锁。对于悲观锁来说&#xff0c;他总是认为每次访问共享资源时会发生冲突&#xff0c;所以必须每次数据操作加上锁&#xff0c;以保证临界区的程序同一时间只能有一个…...

优惠券秒杀(二)

库存超卖问题分析 库存超卖问题其本质就是多个线程操作共享数据产生的线程安全问题&#xff0c;即当一个线程在执行操作共享数据的多条代码的过程中&#xff0c;其他线程也参与了进来&#xff0c;导致了线程安全问题的产生。例如&#xff1a;线程1发送请求&#xff0c;查询库存…...

selenium的java方式打开IE浏览器

1.下载软件Selenium Driver 官方下载地址&#xff1a; ​ https://www.selenium.dev/downloads/解压selenium-java-3.141.59.zip文件到java项目 seleniumDemo&#xff0c;并降解压的文件放入依赖中&#xff08;1&#xff09;双击项目的src打开项目结构&#xff0c;或右键-打开…...

分类评估指标

文章目录 1. 混淆矩阵2. Precision(精准率)3. Recall(召回率)4. F1-score5. ROC曲线和AUC指标5.1 ROC 曲线5.2 绘制 ROC 曲线5.3 AUC 值6. API介绍6.1 **分类评估报告api**6.2 **AUC计算API**练习-电信客户流失预测1. 数据集介绍2. 处理流程3. 案例实现4. 小结1. 混淆矩阵 …...

OpenCV:图像直方图计算

图像直方图为图像中像素强度的分布提供了有价值的见解。通过了解直方图&#xff0c;你可以获得有关图像对比度、亮度和整体色调分布的信息。这些知识对于图像增强、图像分割和特征提取等任务非常有用。 本文旨在为学习如何使用 OpenCV 执行图像直方图计算提供清晰且全面的指南。…...

用QFramework来重构 祖玛游戏

资料 Unity - 祖玛游戏 GitHub 说明 用QF一个场景就够了&#xff0c;在UIRoot下切换预制体达到面板切换。 但测试中当然要有一个直接跳到测试面板的 测试脚本&#xff0c;保留测试Scene&#xff08;不然初学者也不知道怎么恢复测试Scene&#xff09;&#xff0c;所以全文按S…...

生活杂记-显示器尺寸

以下是常见显示器尺寸的对角线长度换算成厘米的结果&#xff08;已经四舍五入到最接近的厘米数&#xff09;&#xff1a; 19英寸显示器 ≈ 48.26厘米21.5英寸显示器 ≈ 54.61厘米24英寸显示器 ≈ 60.96厘米27英寸显示器 ≈ 68.58厘米32英寸显示器 ≈ 81.28厘米34英寸显示器 ≈…...

在CSDN学Golang云原生(Kubernetes Pod无状态部署)

一&#xff0c;静态pod Kubernetes中的Pod是可以动态创建、销毁的&#xff0c;如果希望Pod只使用静态的IP地址而不是自动生成一个IP地址&#xff0c;那么就需要使用静态Pod。 静态Pod是在kubelet启动时通过指定文件夹路径来加载的。当kubelet检测到这些配置文件变化后&#x…...

@Bean的作用

Bean通常和Configuration注解一起使用 Bean可以用在方法上&#xff0c;方法返回的对象交给spring容器管理&#xff0c;和提供给其他程序组件使用 Bean是一个注解&#xff0c;用于将方法标记为Spring容器中的一个Bean。具体来说&#xff0c;Bean注解可以用于方法上&#xff0c…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...