useCallback()

官网直达:https://zh-hans.react.dev/reference/react/useCallback

点击按钮,子组件会重新渲染

import { memo, useState, useCallback } from 'react';const Child = (props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
}const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} /></>)
}export default Parent;

点击父组件的按钮,子组件也跟着渲染

使用memo()包裹子组件,如下

import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} /></>)
}export default Parent;

这样父组件里的state变换就不会再渲染子组件了

使用memo()后会对props进行浅比较,如果props没有变化,则不会重新渲染子组件

现在要给子组建要传入一个函数p4,如下

import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';const p4 = () => {console.log(p2, p3)}return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} p4={p4} /></>)
}export default Parent;

现在添加p4,发现父组件的state变换,子组件也会重新渲染

说明p4变化了

这是因为p4是一个函数,每次渲染都会生成一个新的函数,导致props变化,从而触发子组件重新渲染

所以需要使用useCallback来缓存函数,确保是同一个函数

useCallback接受两个参数,第一个参数是函数,第二个参数是依赖项数组如下

同时在包裹函数的时候要在useCallback里传入函数所依赖的参数,

否则useCallback会认为函数没有依赖项,每次都会生成一个新的函数

import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';const p4 = useCallback(() => {console.log(p2, p3)}, [p2, p3])return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} p4={p4} /></>)
}export default Parent;

哎,这样就可以了,子组建没有重新渲染

来看下回调函数执行完之后会是怎样的一个结果

子组建执行props.p4()

如果回调里面要把p1log出来,会出现什么问题

只有第一次才会输出,p1改变不执行

应为函数p4被缓存了起来

依赖项是p2和p3,p1改变,不会触发p4重新生成

添加依赖项p1,p4重新生成,p1改变,p4重新执行

import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')props.p4()return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';const p4 = useCallback(() => {console.log(p2, p3, p1)}, [p2, p3, p1])return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} p4={p4} /></>)
}export default Parent;

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

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

相关文章

k8s架构,从clusterIP到光电半导体,再从clusterIP到企业管理

clusterIP作为k8s中的服务&#xff0c; 也是其他三个服务的基础 ~]$ kubectl create service clusterip externalname loadbalancer nodeport 客户端的流量到service service分发给pod&#xff0c;pod由控制器自动部署&#xff0c;自动维护 那么问题是service的可用…

计算机网络期末复习真题(附真题答案)

前言&#xff1a; 本文是笔者在大三学习计网时整理的笔记&#xff0c;哈理工的期末试题范围基本就在此范畴内&#xff0c;就算真题有所更改&#xff0c;也仅为很基础的更改数值&#xff0c;大多跑不出这些题&#xff0c;本文包含简答和计算等大题&#xff0c;简答的内容也可能…

【RADARSAT Constellation Mission(RCM)卫星星座简介】

RADARSAT Constellation Mission&#xff08;RCM&#xff09;卫星星座是加拿大太空局&#xff08;CSA&#xff09;的下一代C波段合成孔径雷达&#xff08;SAR&#xff09;卫星星座&#xff0c;以下是对其的详细介绍&#xff1a; 一、基本信息 发射时间&#xff1a;2019年6月…

基于微信小程序的四六级词汇+ssm(lw+演示+源码+运行)

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;四六级词汇小程序被用户普遍使用&#xff0c;为方便用户能…

容器适配器-stack、queue、priority_queue和仿函数

目录 1.什么是适配器 2.deque 1.简单了解结构 2.deque的缺陷 3.为什么选择deque作为stack和queue的底层默认容器 3.stack&#xff08;栈&#xff09; 4.queue&#xff08;队列&#xff09; 5.仿函数 6.priority_queue&#xff08;优先级队列&#xff09;&#xff08;堆…

CentOS 系统中设置宝塔面板开机自启

创建 Systemd 服务文件&#xff1a; 在 /etc/systemd/system/ 目录下创建一个新的服务文件&#xff0c;例如 bt.service&#xff1a; sudo vi /etc/systemd/system/bt.service在文件中添加以下内容&#xff1a; [Unit] Description宝塔面板[Service] Typesimple ExecStart/usr/…

微信小程序map组件自定义气泡真机不显示

最近遇到一个需求需要使用uniapp的map自定义气泡 &#xff0c;做完之后发现在模拟器上好好的&#xff0c;ios真机不显示&#xff0c;安卓页数时好时不好的 一番查询发现是小程序的老问题了&#xff0c;网上的方法都试了也没能解决 后来看到有人说用nvue可以正常显示&#xff0c…

03 掌握Docker核心架构:镜像、仓库、容器及运行管理的深度解析

文章目录 03 掌握Docker核心架构:镜像、仓库、容器及运行管理的深度解析一 概述1.1 镜像1.2 镜像仓库1.3 容器二、镜像及镜像仓库2.1 本地镜像仓库2.2 镜像仓库简介2.3 使用远端仓库2.3.1 从远端镜像仓库拉取apache镜像2.3.2 从远端镜像仓库拉取指定版本apache镜像2.4 使用国内…

VS Code 图形化合并工具

VS Code 图形化合并工具能够帮助你更直观地进行代码合并和解决冲突 1. VS Code 内置的 Git 合并工具 VS Code 自带的 Git 支持已经非常强大&#xff0c;能够在合并冲突时提供直观的图形化界面&#xff0c;帮助你轻松解决冲突。以下是使用内置功能的步骤&#xff1a; 步骤一&…

会议平台后端优化方案

会议平台后端优化方案 通过RTC的学习&#xff0c;我了解到了端对端技术&#xff0c;就想着做一个节省服务器资源的会议平台 之前做了这个项目&#xff0c;快手二面被问到卡着不知如何介绍&#xff0c;便有了这篇文章 分析当下机制 相对于传统视频平台&#xff08;SFU&#xff…

RabbitMQ 优点和缺点

优势&#xff1a; 消息可靠性&#xff1a;RabbitMQ 提供了持久化功能和消息确认机制&#xff0c;确保消息在各种情况下都能可靠地存储和处理。 灵活的路由&#xff1a;通过多种交换机类型和绑定规则&#xff0c;RabbitMQ 能够灵活地路由消息到指定的队列。 支持多种消息协议&am…

Nagle 算法:优化 TCP 网络中小数据包的传输

1. 前言 在网络通信中&#xff0c;TCP&#xff08;传输控制协议&#xff09;是最常用的协议之一&#xff0c;广泛应用于各种网络应用&#xff0c;如网页浏览、文件传输和在线游戏等。然而&#xff0c;随着互联网的普及&#xff0c;小数据包的频繁传输成为一个不容忽视的问题。…

c# iTextSharp 读取PDF

安装 iTextSharp&#xff1a; 可以通过 NuGet 包管理器安装 iTextSharp&#xff1a; Install-Package itext7创建 PDF 文件&#xff1a; using System; using System.IO; using iText.Kernel.Pdf; using iText.Layout; using iText.Layout.Element;class Program {static voi…

828华为云征文 | 云服务器Flexus X实例:向量数据库 pgvector 部署,实现向量检索

目录 一、什么是向量数据库 pgvector &#xff1f; 二、pgvector 部署 2.1 安装 Docker 2.2 拉取镜像 2.3 添加规则 三、pgvector 运行 3.1 运行 pgvector 3.2 连接 pgvector 3.3 pgvector 常见操作 四、总结 本篇文章通过 云服务器Flexus X实例 部署向量数据库 pgve…

Windows11系统下SkyWalking环境搭建教程

目录 前言SkyWalking简介SkyWalking下载Agent监控实现启动配置SkyWalking启动Java应用程序启动Elasticsearch安装总结 前言 本文为博主在项目环境搭建时记录的SkyWalking安装流程&#xff0c;希望对大家能够有所帮助&#xff0c;不足之处欢迎批评指正&#x1f91d;&#x1f91…

计算机毕业设计之:音乐媒体播放及周边产品运营平台(源码+文档+讲解)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

听说这是MATLAB基础?

MATLAB&#xff08;矩阵实验室&#xff09;是一个强大的高性能计算环境和编程语言&#xff0c;广泛应用于数学计算、算法开发、数据分析、可视化以及模拟等多个领域。以下是MATLAB的一些基础知识&#xff0c;涵盖其功能、语法、基本操作等方面。 1. MATLAB环境 工作区&#xf…

Json 在线可视化工具,分享几个

文章目录 1.json.cn2.json4u.cn3.jsonvisual.com4.jsoncrack5.altearius.github.io6.json.wanvb.com 前序&#xff1a;本文是对多种 Json 在线可视化工具 的介绍、分享。Json官网 https://www.json.org/json-en.html 个人比较中意第四款&#xff1a; https://jsoncrack.com/ed…

测试用例的进阶二

1. 按开发阶段划分 1.1 测试金字塔 从上到下&#xff0c;对于测试人员代码就是要求越来越低&#xff1b; 从下到上&#xff0c;越来越靠近用户&#xff1b; 从下到上&#xff0c;定位问题的成本越来越高&#xff1b; 1.2 单元测试(Unit Testing) 单元测试是对软件组成单元进…

uni-app+vue3开发微信小程序使用本地图片渲染不出来报错[渲染层网络层错误]Failed to load local image resource

我把图片放在assets里面页面通过相对路径引入。结果一直报错。 最后我把图片放在static文件夹下面。然后修改路径指向static就可以了 或者是我们必须先import 这个图片然后在使用 import banner1 from ../../assets/images/banner/banner1.png; <image :src"banner…