react函数组件常用的几个钩子函数

news/2025/2/15 23:41:59/

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>

文章来源:https://blog.csdn.net/weixin_45024453/article/details/129366825
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/74214.html

相关文章

Android 系统内的守护进程 - main类服务(7) : sdcard

声明 只要是操作系统,不用说的就是其中肯定会运行着一些很多守护进程(daemon)来完成很多杂乱的工作。通过系统中的init.rc文件也可以看出来,其中每个service中就包含着系统后台服务进程。而这些服务被分为:core类服务(adbd/servicemanager/healthd/lmkd/logd/vold)和mai…

在Window10和Window11系统,WPF使用Viewport3D 渲染失败问题解决方案

最近遇到个棘手的问题&#xff1a;在供应商提供的戴尔optiplex 3000的12代处理器主机的集成显卡Intel(R) UHD Graphics 770上使用Viewport3D 渲染失败&#xff08;3D模型显示不了&#xff0c;或者是显示不全&#xff09;&#xff0c;之前开发验证使用的是集成显卡Intel(R) UHD …

【大数据模型】LeonardoAi让心中所想跃然纸上

汝之观览&#xff0c;吾之幸也&#xff01; 本文主要聊聊LeonardoAi绘图工具 一、注册Discord账号 不管LeonardoAi还是midjourney&#xff0c;都需要注册一个Discord账号&#xff0c;Discord是一个社区软件&#xff0c;在这里可以进行讨论和交流使用心得 LeonardoAi官网地址 …

MySQL数据库之存储引擎

一、存储引擎的概念 1.1 什么是存储引擎 MySQL中的数据用各种不下同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制、索引技巧、锁定水平并最终提供不同的功能和能力&#xff0c;这些不同的技术以及配套的功能在MySQL中称为存储引擎。存储引擎是MySQL将数据存…

Numpy 函数 (一) squeeze(), unsquezze()

1. np.squeeze() syn: np.squeeze(a,axisNone) Notice: 1. a 表示输入的数组 2. axis表示指定需要删除的维度,但是指定的维度必须为单个维度,否则会报错 3. axis 取值可以为None, int, tuple of ints, 或者 axis 为空则表示删除所有单个维度 4.返回值:数组 5. 不会在原来的数组…

Linux内核模块编程

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 1 总体设计思路 Linux内核是单体式结构&#xff0c;相对于微内核结构而言&#xff0c;其运行效率高&#xff0c;但是系统的可维护性和可扩展性较差。为此&#xff0c;Linux提供了内核模块&#xff08;module&#xff09;机制&…

埃尔德动力系统指标公式,衡量趋势的惯性和能量

亚历山大埃尔德(Alexander Elder)在其经典著作《以交易为生》&#xff08;原书第2版&#xff09;新增了一个工具——动力系统(Impulse System)&#xff0c;不过书中只介绍了动力系统的指标以及使用方法&#xff0c;并没有介绍系统的参数。其实动力系统在埃尔德2002年出版的《走…

戴尔 dell Inspiron3670电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。&#xff08;下载请直接百度黑果魏叔&#xff09; 硬件型号驱动情况 主板B360 处理器i5-9400已驱动 内存8GB已驱动 硬盘KBG40ZNS256G NVMe KIOXIA 256GB ST1000DM010 1TB已驱动 显卡UHD630(1.05GHZ)已驱动 声卡Realte…