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

react组件渲染性能优化之函数组件-useCallback使用

useCallback主要就是对函数进行缓存,useCallBack这个Hooks主要是解决React.memo不能缓存事件的问题

useCallBack(fn, dependencies) :fn想要缓存的函数,dependencies有关是否更新 fn 的所有响应式值的一个列表

比如:UseCallBackOptimize组件传递了一个事件函数给ChildCom2、ChildCom3,只要其中一个子组件调用这个事件就会影响到另一个子组件重新渲染一次,React.memo可以解决传值问题,但解决不了传递事件的问题。

示例:

styles.module.css

.container {width: 500px;height: 200px;border: 1px solid;margin: 0 auto;
}.btnContainer {text-align: center;
}.childComContainer {display: flex;justify-content: space-between;
}

import { useState, useCallback } from 'react'
import ChildCom2 from './components/ChildCom2'
import ChildCom3 from './components/ChildCom3'
import styles from "./styles.module.css"
export default function UseCallBackOptimize() {// 这是UseCallBackOptimize组件自身维护的状态const [counter, setCounter] = useState(0);// 这是传递给ChildCom2组件的数据const [counter1, setCounter1] = useState(0);// 这是传递给ChildCom3组件的数据const [counter2, setCounter2] = useState(0);//之所以子组件使用了memo后都无法阻止子组件之间互相影响,是因为每次重新渲染的时候都会生成一个圈新的test函数function test() {console.log("test");}console.log("UseCallBackOptimize组件渲染了")return (<div className={styles.container}><div className={styles.btnContainer}><div>{counter}</div>{/*点击修改数字时,ChildCom2和ChildCom3组件都会更新,原因看test上面*/}<button onClick={() => setCounter(counter + 1)}>+1</button></div><div className={styles.childComContainer}><ChildCom2 counter={counter1} setCounter={setCounter1} test={test}/><ChildCom3 counter={counter2} setCounter={setCounter2} test={test}/></div></div>);
}

import { memo } from "react"
function ChildCom2(props) {// 该子组件维护了一个自身的状态// const [counter, setCounter] = useState(0);console.log("ChildCom2 渲染了")return (<div style={{width: "200px",height: "100px",border: "1px solid"}}>ChildCom2<div>{props.counter}</div><button onClick={() => props.setCounter(props.counter + 1)}>+1</button><button onClick={() => props.test()}>test</button></div>);
}export default memo(ChildCom2);
import { memo } from "react"
function ChildCom3(props) {// 该子组件维护了一个自身的状态// const [counter, setCounter] = useState(0);console.log("ChildCom3 渲染了")return (<div style={{width: "200px",height: "100px",border: "1px solid"}}>ChildCom3<div>{props.counter}</div><button onClick={() => props.setCounter(props.counter + 1)}>+1</button><button onClick={() => props.test()}>test</button></div>);
}export default memo(ChildCom3);

本来调用ChildCom2的函数ChildCom3是不应该重新渲染的,使用useCallBack可以解决这个问题,两个子组件什么都不变的

解决后示例

import { useState, useCallback } from 'react'
import ChildCom2 from './components/ChildCom2'
import ChildCom3 from './components/ChildCom3'
import styles from "./styles.module.css"
export default function UseCallBackOptimize() {// 这是UseCallBackOptimize组件自身维护的状态const [counter, setCounter] = useState(0);// 这是传递给ChildCom2组件的数据const [counter1, setCounter1] = useState(0);// 这是传递给ChildCom3组件的数据const [counter2, setCounter2] = useState(0);//todo 之所以子组件使用了memo后都无法阻止子组件之间互相影响,是因为每次重新渲染的时候都会生成一个圈新的test函数/* function test() {console.log("test");} */// 使用了 useCallback 之后,针对test函数就做了一个缓存,如果依赖某个参数如counter,就在参数2[]里面传入进去const newTest = useCallback(function test() {console.log("test");}, [])console.log("UseCallBackOptimize组件渲染了")return (<div className={styles.container}><div className={styles.btnContainer}><div>{counter}</div><button onClick={() => setCounter(counter + 1)}>+1</button></div><div className={styles.childComContainer}><ChildCom2 counter={counter1} setCounter={setCounter1} test={newTest}/><ChildCom3 counter={counter2} setCounter={setCounter2} test={newTest}/></div></div>);
}

相关文章:

react组件渲染性能优化之函数组件-useCallback使用

useCallback主要就是对函数进行缓存,useCallBack这个Hooks主要是解决React.memo不能缓存事件的问题 useCallBack(fn, dependencies) &#xff1a;fn想要缓存的函数&#xff0c;dependencies有关是否更新 fn 的所有响应式值的一个列表 比如&#xff1a;UseCallBackOptimize组件…...

【C++】:string类的基本使用

目录 引言一&#xff0c;string类对象的常见构造二&#xff0c;string类对象的容量操作三&#xff0c;string类对象的访问及遍历操作四&#xff0c;string类对象的修改操作五&#xff0c;string类非成员函数六&#xff0c;整形与字符串的转换 引言 string 就是我们常说的"…...

多线程的代码案例

目录 单例模式 饿汉模式 懒汉模式 阻塞队列 生产者消费者模型意义: 阻塞队列使用方法 实现阻塞队列 阻塞队列实现生产者消费者模型 定时器 实现简单的定时器 工厂模式 线程池 为啥呢? 从池子里面取 比 创建线程 效率更高 线程池的创建 怎么填坑 ThreadPoolExec…...

什么是Java中的设计模式?请列举几种常见的设计模式

一、引言 在软件开发中&#xff0c;设计模式是解决特定设计问题的最佳实践或通用解决方案。Java作为一种广泛使用的编程语言&#xff0c;其设计模式在软件设计和架构中起着至关重要的作用。设计模式不仅提高了代码的可读性和可维护性&#xff0c;还使得代码更加灵活和可扩展。…...

绘制奇迹:Processing中的动态图形与动画

&#x1f680; 欢迎回到Processing的世界&#xff0c;你的艺术编程航程刚刚开始。在我们的入门篇中&#xff0c;你已经学会了如何用Processing绘制基本的静态图形。现在&#xff0c;让我们一起探索Processing强大的动态图形和动画功能&#xff0c;释放你的创造力&#xff0c;走…...

Django视图Views

Views视图 HttpRequest 和HttpResponse Django中的视图主要用来接受web请求&#xff0c;并做出响应。视图的本质就是一个Python中的函数视图的响应分为两大类 1)以Json数据形式返回(JsonResponse) 2)以网页的形式返回 2.1)重定向到另一个网页 (HttpRe…...

国内智能搜索工具实战教程

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…...

WebSocket or SSE?即时通讯的应用策略【送源码】

最近在研究H5推送&#xff0c;发现除了我们常用的WebSocket以外&#xff0c;其实还有一种协议也能实现H5推送&#xff0c;那就是SSE协议。 而且&#xff0c;当前主流的大模型平台&#xff0c;比如ChatGPT、通义千问、文心一言&#xff0c;对话时采用的就是SSE。 什么是SSE协议…...

QT实现Home框架的两种方式

在触摸屏开发QT界面一般都是一个Home页面&#xff0c;然后button触发进入子页面显示&#xff0c;下面介绍这个home框架实现的两种方式&#xff1a; 1.方式一&#xff1a;用stackedWidget实现 &#xff08;1&#xff09;StackedWidget控件在Qt框架中是一个用于管理多个子窗口或…...

机器学习笔记03

1.线性回归&#xff08;linear regression&#xff09; 是利用回归方程&#xff08;函数&#xff09;对一个或者多个自变量&#xff08;特征值&#xff09;和因变量&#xff08;目标值&#xff09;之间关系进行建模的一种分析方法。 线性模型&#xff1a; 1.线性关系&#xff1…...

【全面介绍下Spring】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…...

MYSQL-存储引擎

存储引擎就是储数据、建立索引、更新/查询数据等技术的实现方式。存储引擎是基于表的,而不是基于库的,所以存储引擎也可被 称为表类型。 存储引擎特点 . InnoDB 介绍 InnoDB是一种兼顾高可靠性和高性能的通用存储引擎,在MySQL 5.5之后,InnoDB是默认的MySQL存储引擎。 >特…...

红蓝对抗 网络安全 网络安全红蓝对抗演练

什么是红蓝对抗 在军事领域&#xff0c;演习是专指军队进行大规模的实兵演习&#xff0c;演习中通常分为红军、蓝军&#xff0c;演习多以红军守、蓝军进攻为主。类似于军事领域的红蓝军对抗&#xff0c;网络安全中&#xff0c;红蓝军对抗则是一方扮演黑客&#xff08;蓝军&…...

springboot 序列化和反序列化

介绍 在Java中&#xff0c;序列化和反序列化是一种将对象转换为字节流或将字节流转换为对象的机制。通过序列化&#xff0c;可以将对象存储到文件中、传输到网络上&#xff0c;或者在分布式系统中进行对象的传递。本文将详细介绍Java序列化和反序列化的原理、使用方法和常见应用…...

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第一周) - 自然语言处理介绍和线性分类

自然语言处理介绍和线性分类 1. 自然语言处理介绍2. 线性二分类3. 情感分析和基础特征提取 3.1. 情感分析3.2. 特征提取3.3. 文本预处理 4. 学习的基础-梯度下降算法5. 感知机6. 逻辑回归7. 情感分析8. 感知机和逻辑回归 1. 自然语言处理介绍 自然语言处理的目标是什么 能够解…...

SQL注入漏洞常用绕过方法

SQL注入漏洞 漏洞描述 Web 程序代码中对于用户提交的参数未做过滤就直接放到 SQL 语句中执行&#xff0c;导致参数中的特殊字符打破了原有的SQL 语句逻辑&#xff0c;黑客可以利用该漏洞执行任意 SQL 语句&#xff0c;如查询数据、下载数据、写入webshell 、执行系统命令以及…...

C语言输出符

C语言输出符 以下是C语言中一些常用的格式化输出的格式控制符及其对应的数据类型&#xff1a; 格式控制符描述对应数据类型%d十进制有符号整数int%ld长整型long int%lld长长整型long long int%u十进制无符号整数unsigned int%lu无符号长整型unsigned long int%llu无符号长长整…...

申请一个开发者域名

申请一个开发者域名 教程 fourm.js.org 因本地没安装 hexo 环境&#xff0c;模板下载的 html...

接搭建仿美团、代付系统源码搭建教程

最近很多粉丝催更、分享一下地球号&#xff1a;xiaobao0214520(WX) 现在大家都很流行搞网恋&#xff0c;我们搭建一个跟美团相似的系统 然后开发一个好友代付&#xff0c;我们在点单的时候转发链接让网恋对象付钱 若只是单点外卖的话&#xff0c;能榨出的油水还是太少。 所以…...

迭代的难题:敏捷团队每次都有未完成的工作,如何破解?

各位是否遇到过类似的情况&#xff1a;每次迭代结束后&#xff0c;团队都有未完成的任务&#xff0c;很少有完成迭代全部的工作&#xff0c;相反&#xff0c;总是将上期未完成的任务重新挪到本期计划会中&#xff0c;重新规划。敏捷的核心之一是“快速迭代&#xff0c;及时反馈…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...