react函数组件常用的几个钩子函数
react框架
react框架包括包括两大类:类组件+函数组件。
类组件构成:constructor+自定义方法。调用方法通过this.方法名()。constructor(super+state)构造器里面必有super字段。render()方法里面写页面布局。
函数组件构成:各种钩子函数+return()方法里面写页面布局。钩子函数是use开头的系列。
函数组件常用的钩子函数useState、useEffect、useRef、useCallback
一、useState
定义:
useState是react自带的一个hook函数,它的作用是用来声明状态变量。
详细解释:在项目中,我们通过react-redux 或者dva数据存储框架进行全局声明并保存state中的数据。可是如果我们想在当前操作的index.tsx或者index.jsx中使用state,可以通过useState()钩子函数进行声明某一个当前页面的state数据状态。
用法:
const [ count , setCount ] = useState(0);useState(params) 设置 第一个参数的初始值
count 是第一个参数解构出的第一个参数
setCount 是第二个参数 是一个函数 用来设置count
二、useEffect
定义:
什么是副作用
副作用是相对于主作用来说的,一个函数除了主作用,其他的作用就是副作用。对于 React 组件来说,主作用就是根据数据(state/props)渲染 UI,除此之外都是副作用(比如,手动修改 DOM)
常见的副作用
数据请求 ajax发送
手动修改dom
localstorage操作
用法:
useEffect函数的作用就是为react函数组件提供副作用处理的!
useEffect(() => {},[])接受2个参数,第一个是函数,第二个是数组
如果第二个参数数组为空 它就是componentDidMount 只有第一次渲染
如果二个参数数组 里面的值 设置的 值改变 它就是componentDidUpdate 只要值改变了 他就渲染
useEffect 内部 最外层 支持return () => 相当于 componentWillUnmount 卸载 来开当前组件的时候触发 并且 每次更新都触发。 相同点: useState 和 useEffect 支持写多个
实际使用:
在项目中,结合dva,在页面组件中发起网络请求。
useEffect(() => {函数},[])
{dispatch({参数})}
{type:'model模块名/某一个方法', //namespace如果在model外调用,需要添加。payload:{} //写法:state中定义的属性:属性值。需要传递的信息。
} 三、useRef
定义:
使用useRef获取Dom元素,可以再useEffect中立马使用。
useEffect在页面组件中会渲染两次,根据react框架的设计者的设定,无法在初次渲染中拿到DOM(真实的Dom节点),不能通过document.getElementByID('#id名')这种方式获取真实的dom节点。
ref的拿取:callbackRef
通过callbackRef,在组件挂载后,操作该dom。会在真实Dom生成时执行。使用callbackRef,使用它用回调函数的方式获取ref,进而保存使用。
使用步骤:
const myRef = useRef()
myRef.current = 赋值
render/return (...)
<div ref={myRef}>
</div>
相关文章:
react函数组件常用的几个钩子函数
react框架 react框架包括包括两大类:类组件函数组件。 类组件构成:constructor自定义方法。调用方法通过this.方法名()。constructor(superstate)构造器里面必有super字段。render()方法里面写页面布局。 函数组件构成:各种钩子函数return()方…...
如何进行大数据测试
大数据解决方案 大数据解决方案包括一系列工具和技术,用于收集、存储、处理和分析大量的数据。以下是一些常用的大数据解决方案: Apache Hadoop:Hadoop是一个开源的大数据处理框架,可以在商用硬件上处理大规模数据集。它包括HDFS…...
java版本企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发
一、立项管理 1、招标立项申请 功能点:招标类项目立项申请入口,用户可以保存为草稿,提交。 2、非招标立项申请 功能点:非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点:对草稿进行编辑&#x…...
Redis哨兵集群搭建及其原理
Redis哨兵集群搭建及其原理 1.Redis哨兵1.1.哨兵原理1.1.1.集群结构和作用1.1.2.集群监控原理1.1.3.集群故障恢复原理1.1.4.小结 2.搭建哨兵集群2.1.集群结构2.2.准备实例和配置2.3.启动2.4.测试 3.RedisTemplate3.1.引入依赖3.2.配置Redis地址3.3.配置读写分离 1.Redis哨兵 R…...
读书笔记--读数学之美有感
大概是在10年前,无意间读到吴军老师撰写得数学之美,感觉吴老师对数学与信息论的结合讲述的太好了,吴老师结合自身的多年工作经历将信息技术中用到的数学,特别是数学里面的很多概率论、线性代数、模型算法、编解码规则等࿰…...
[PyTorch][chapter 33][卷积神经网络]
前言 参考: 《数字图像处理与机器视觉》 第五章 空间域图像增强, 图像卷积: 空间域图像增强 图像增强是根据特定需要突出一副图像中的某些信息,同时削弱或去除 某些不需要信息的处理方法,其主要目的是是的处理后的图像对某种特定的…...
Lift, Splat, Shoot 论文学习
1. 解决了什么问题? LSS 在工业界具有非常重要的地位。自从 Tesla AI Day 上提出了 BEV 感知后,不少公司都进行了 BEV 工程化的探索。当前 BEV 下的感知方法大致分为两类: 自下而上:利用 transformer 的 query 机制,…...
【密码产品篇】动态口令系统密钥体系结构(SM3、SM4)
【密码产品篇】动态口令系统密钥体系结构(SM3、SM4) 动态口令是一种一次性口令机制,用户无须记忆口令,也无须手工更改口令。口令通过用户持有的客户端器件生成,并基于一定的算法与服务端形成同步,从而作为…...
PDF工具Adobe Arcrobat Pro DC下载安装教程
wx供重浩:创享日记 对话框发送:adobe 免费获取Adobe Arcrobat Pro DC安装包 Acrobat是一款PDF(Portable Document Format,便携式文档格式)编辑软件。借助它,您可以以PDF格式制作和保存你的文档 ,…...
大量从IT培训班出来的程序员们最后都怎样了?
在当今信息时代,IT行业越来越受到人们的关注。越来越多的年轻人选择进入IT行业学习编程技术,而IT培训班也因此应运而生。据统计,在中国,每年约有100万人通过各种途径进入IT行业。其中,通过IT培训班获得技能认证的人数也…...
【论文阅读笔记】Federated Unlearning with Knowledge Distillation
个人阅读笔记,如有错误欢迎指出 Arxiv 2022 [2201.09441] Federated Unlearning with Knowledge Distillation (arxiv.org) 问题: 法律要求客户端有随时要求将其贡献从训练中消除的权利 让全局模型忘记特定客户的贡献的一种简单方法是从头开始对模型进…...
常用MQ介绍与区别
RabbitMQ RabbitMQ是实现AMQP协议(0.9.1) 的消息中间件的一种,由RabbitMQ Technologies Ltd开发并且提供商业支持的,最初起源于金融系统,服务器端用Erlang语言编写,用于在分布式系统中存储转发消息,在易用性、扩展性、…...
今天面试招了个20K的人,从腾讯出来的果然都有两把刷子···
现在找个会自动化测试的人真是难呀,10个里面有8个写了会自动化,但一问就是三不知 公司前段时间缺人,也面了不少测试,前面一开始瞄准的就是中级的水准,也没指望来大牛,提供的薪资在15-20k,面试的…...
加速度传感器的量程估算
下面推导过程中包含一个重要的错误:sinx/x1没有错,但是这里的x是 t,当x t时,位移并非sin(t),而是n*sin(t),我稍後修訂。 在测震动和噪声的场合,现有的加速度传感器,需要客户提供加…...
0601-指针的基础
内存 物理存储器和存储地址空间 物理存储器:实际存在的具体存储器芯片。比如:内存条、RAM芯片、ROM芯片。 存储地址空间:对存储器编码的范围。 编码:对每个物理存储单元(一个字节)分配一个号码寻址&…...
关于K8S库中高可用的锁机制详解
简介 对于无状态的组件来说,天然具备高可用特性,无非就是多开几个副本而已;而对于有状态组件来说,实现高可用则要麻烦很多,一般来说通过选主来达到同一时刻只能有一个组件在处理业务逻辑。 在Kubernetes中,…...
常用中外文献检索网站大盘点
一、常用中文文献检索权威网站: 1、知网:是全球最大的中文数据库。提供中国学术文献、外文文献、学位论文、报纸、会议、年鉴、工具书等各类资源,并提供在线阅读和下载服务。涵盖领域包括:基础科学、文史哲、工程科技、社会科学、…...
公司招了一个00后,以为是个小年轻,没想到人家是个卷王...
公司前段缺人,也面了不少测试,结果竟然没有一个合适的。一开始瞄准的就是中级的水准,也没指望来大牛,提供的薪资也不低,面试的人很多,但平均水平很让人失望。 令我印象最深的是一个00后测试员,…...
数字化转型难?怎么转?听听厂商、CIO、CEO怎么说
数字化转型已经成为当今商业领域中的热门话题。对于许多企业来说,数字化转型是一项重要而且必不可少的战略,以适应快速变化的市场环境并保持竞争力。然而,数字化转型并不是一项容易的任务,它涉及到许多方面,需要综合考虑技术、组织和文化等因素。那么,让我们来听听一些厂…...
C++面试题汇总
C面试题汇总 1. new/delete和malloc/free:2. delete和delete[]:3. 常引用:4. overload、override、overwrite的介绍5. C是不是类型安全的?6. main 函数执行以前,还会执行什么代码?7. 数组与指针的区别&…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
算术操作符与类型转换:从基础到精通
目录 前言:从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符:、-、*、/、% 赋值操作符:和复合赋值 单⽬操作符:、--、、- 前言:从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...
【实施指南】Android客户端HTTPS双向认证实施指南
🔐 一、所需准备材料 证书文件(6类核心文件) 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...
