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. 数组与指针的区别&…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
